feat: add mobile sidebar trigger to AppHeader and update build process for CSS

Author: hotlong

packages/app-shell/src/layout/AppHeader.tsx

@@ -19,6 +19,7 @@
 
 import { useLocation, useParams, Link, useNavigate } from 'react-router-dom';
 import {
+  SidebarTrigger,
   Button,
   DropdownMenu,
   DropdownMenuTrigger,
@@ -244,6 +245,9 @@ export function AppHeader({
 
         {isApp && (
           <>
+            {/* Mobile sidebar trigger */}
+            <SidebarTrigger className="md:hidden shrink-0 ml-1" />
+
             {/* App dropdown */}
             {activeAppName && onAppChange ? (
               <>

packages/components/package.json

@@ -27,7 +27,7 @@
   },
   "scripts": {
     "test:compliance": "vitest run src/__tests__/compliance.test.tsx",
-    "build": "vite build",
+    "build": "vite build && node scripts/build-css.mjs",
     "prebuild": "pnpm --filter @object-ui/types build && pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build",
     "pretest": "pnpm run prebuild",
     "test": "vitest run",

packages/components/scripts/build-css.mjs

@@ -0,0 +1,65 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Builds `dist/index.css` from `src/index.css`.
+ *
+ * Why a standalone script (instead of `import './index.css'` in `src/index.ts`):
+ *   In a pnpm monorepo dev server, that import would inject a SECOND
+ *   Tailwind stylesheet (its `@source` only scans this package's src),
+ *   which would override responsive utilities (`md:hidden`, `!top-14`, …)
+ *   declared in sibling packages. See the comment in `src/index.ts`.
+ *
+ * This script runs only during `pnpm build` so consumers can still
+ * `@import '@object-ui/components/style.css'` from their own CSS entry.
+ *
+ * The build pipeline:
+ *   1. `vite build` extracts `import './sidebar-fixes.css'` from `src/index.ts`
+ *      and writes it to `dist/index.css` (~2 kB of plain CSS overrides).
+ *   2. This script runs AFTER vite, reads the Vite-emitted file, then
+ *      prepends the full Tailwind compilation of `src/index.css`. Order
+ *      matters — Tailwind utilities first, sidebar overrides last so they
+ *      win on equal specificity.
+ */
+import { mkdir, readFile, writeFile, access } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import postcss from 'postcss';
+import tailwindPostcss from '@tailwindcss/postcss';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const root = resolve(here, '..');
+const input = resolve(root, 'src/index.css');
+const output = resolve(root, 'dist/index.css');
+
+const css = await readFile(input, 'utf8');
+const result = await postcss([tailwindPostcss()]).process(css, {
+  from: input,
+  to: output,
+});
+
+let viteEmittedOverrides = '';
+try {
+  await access(output);
+  viteEmittedOverrides = await readFile(output, 'utf8');
+} catch {
+  // Vite did not emit dist/index.css (e.g. fresh build). That's fine — the
+  // sidebar-fixes.css source will be missing from the published bundle, but
+  // the same overrides also load at runtime from the JS-side
+  // `import './sidebar-fixes.css'`. This branch is mainly defensive.
+}
+
+const merged = viteEmittedOverrides
+  ? `${result.css}\n\n/* === sidebar-fixes.css (extracted by Vite) === */\n${viteEmittedOverrides}`
+  : result.css;
+
+await mkdir(dirname(output), { recursive: true });
+await writeFile(output, merged, 'utf8');
+if (result.map) await writeFile(`${output}.map`, result.map.toString(), 'utf8');
+
+const sizeKb = (Buffer.byteLength(merged, 'utf8') / 1024).toFixed(2);
+console.log(`✓ built dist/index.css (${sizeKb} kB)`);
+

packages/components/src/index.ts

@@ -6,7 +6,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './index.css';
+// NOTE: Do NOT `import './index.css'` here.
+//
+// `index.css` is a standalone Tailwind v4 entry (`@import 'tailwindcss'`).
+// In Vite library `build`, that import is extracted to `dist/index.css` and
+// dropped from the JS bundle automatically — consumers explicitly load it
+// via `@import '@object-ui/components/style.css'` (see README).
+//
+// In a pnpm monorepo dev server, however, the workspace package is resolved
+// to its `src/`, so the import would be evaluated and Vite would inject a
+// SECOND, partial Tailwind stylesheet (its `@source` only scans
+// `packages/components/src`, missing every other package's classes). That
+// second sheet is appended after the app's stylesheet, so any base utility
+// it redeclares (e.g. `.inline-flex`) overrides media-query variants from
+// the first sheet (e.g. `md:hidden`, `!top-14`) defined elsewhere — silently
+// breaking responsive utilities and overrides used by `@object-ui/app-shell`,
+// `@object-ui/auth`, etc.
+//
+// Apps must own the single Tailwind entrypoint and `@source`-scan every
+// workspace package they consume (see `apps/console-starter/src/index.css`).
+//
+// We DO import `sidebar-fixes.css` below: it contains plain CSS overrides
+// (no Tailwind directives) for shadcn sidebar utility classes that Tailwind
+// v4 cannot compile correctly. Plain CSS is safe to inject from a workspace
+// package because it doesn't trigger a second Tailwind build.
+import './sidebar-fixes.css';
 
 // Register all ObjectUI renderers (side-effects)
 import './renderers'; 

packages/components/src/sidebar-fixes.css

@@ -0,0 +1,107 @@
+/**
+ * ObjectUI — Shadcn Sidebar compatibility overrides for Tailwind v4.
+ *
+ * These rules are plain CSS (no `@import 'tailwindcss'` / `@theme`), so they
+ * can be safely imported from `src/index.ts` without re-injecting a second
+ * Tailwind stylesheet (which would override responsive utilities like
+ * `md:hidden`/`!top-14` declared in sibling packages — see comment in
+ * `src/index.ts`).
+ *
+ * Background:
+ *   Shadcn's `sidebar.tsx` was authored for Tailwind v3 and uses arbitrary
+ *   value classes like `w-[--sidebar-width]` and
+ *   `group-data-[collapsible=icon]:w-[--sidebar-width-icon]`. Tailwind v4
+ *   accepts the selector but emits an empty rule (the bare `--xxx` is no
+ *   longer interpreted as `var(--xxx)` for arbitrary values), so the
+ *   sidebar collapses to its content width and overlays the main area.
+ *
+ * The rules below restore the intended behaviour by writing the equivalent
+ * `width`, `opacity`, `display`, etc. declarations explicitly, scoped to
+ * the data-attribute combinations the shadcn component actually toggles.
+ */
+
+/* Sidebar explicit rules for Tailwind 4 compatibility */
+
+/* Icon mode: collapsed state = icon width, expanded state = full width */
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
+  width: var(--sidebar-width-icon);
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
+  width: var(--sidebar-width);
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
+  width: calc(var(--sidebar-width-icon) + 1rem);
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
+  width: var(--sidebar-width);
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
+  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
+  width: var(--sidebar-width);
+}
+
+/* Labels visibility - only hide when BOTH icon mode AND collapsed */
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:opacity-0 {
+  opacity: 0;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
+  opacity: 1;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:-mt-8 {
+  margin-top: -2rem;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
+  margin-top: 0;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:hidden {
+  display: none;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
+  display: block;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
+  overflow: hidden;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
+  overflow: auto;
+}
+
+/* Menu button behavior - collapsed = icon only, expanded = full width */
+.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode {
+  width: 2rem !important;
+  height: 2rem !important;
+  padding: 0.5rem !important;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode {
+  width: 100%;
+  height: auto;
+  padding: 0.5rem;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode-lg {
+  padding: 0 !important;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode-lg {
+  padding: 0.5rem;
+}
+
+/* Offcanvas mode: always collapsed = 0 width */
+.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
+  width: 0;
+}