@object-ui/components 3.0.3 → 3.1.1

package/src/renderers/form/form.tsx

@@ -161,12 +161,12 @@ ComponentRegistry.register('form',
     };
 
     // Determine grid classes based on columns (explicit classes for Tailwind JIT)
-    // Mobile-first: 1 column on mobile, 2 on sm, then md/lg for larger values
+    // Mobile-first: 1 column on mobile, responsive breakpoints for larger screens
     const gridColsClass = 
       columns === 1 ? '' :
-      columns === 2 ? 'sm:grid-cols-2' :
-      columns === 3 ? 'sm:grid-cols-2 md:grid-cols-3' :
-      'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
+      columns === 2 ? 'md:grid-cols-2' :
+      columns === 3 ? 'md:grid-cols-2 lg:grid-cols-3' :
+      'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
     
     const gridClass = columns > 1 
       ? cn('grid gap-4', gridColsClass)

package/src/renderers/navigation/header-bar.tsx

@@ -8,7 +8,8 @@
 
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
-import type { HeaderBarSchema } from '@object-ui/types';
+import type { HeaderBarSchema, BreadcrumbItem as BreadcrumbItemType } from '@object-ui/types';
+import { resolveI18nLabel, SchemaRenderer } from '@object-ui/react';
 import {
   SidebarTrigger,
   Separator,
@@ -17,8 +18,45 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
-  BreadcrumbPage
+  BreadcrumbPage,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Input,
 } from '../../ui';
+import { ChevronDown, Search } from 'lucide-react';
+
+function BreadcrumbLabel({ crumb, isLast }: { crumb: BreadcrumbItemType; isLast: boolean }) {
+  const label = resolveI18nLabel(crumb.label) ?? '';
+
+  if (crumb.siblings && crumb.siblings.length > 0) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger className="flex items-center gap-1">
+          {isLast ? (
+            <span className="font-semibold">{label}</span>
+          ) : (
+            <span>{label}</span>
+          )}
+          <ChevronDown className="h-3 w-3" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {crumb.siblings.map((sibling, i) => (
+            <DropdownMenuItem key={i} asChild>
+              <a href={sibling.href}>{sibling.label}</a>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  if (isLast) {
+    return <BreadcrumbPage>{label}</BreadcrumbPage>;
+  }
+  return <BreadcrumbLink href={crumb.href || '#'}>{label}</BreadcrumbLink>;
+}
 
 ComponentRegistry.register('header-bar', 
   ({ schema }: { schema: HeaderBarSchema }) => (
@@ -27,27 +65,48 @@ ComponentRegistry.register('header-bar',
       <Separator orientation="vertical" className="mr-2 h-4" />
       <Breadcrumb>
         <BreadcrumbList>
-          {schema.crumbs?.map((crumb: any, idx: number) => (
+          {schema.crumbs?.map((crumb: BreadcrumbItemType, idx: number) => (
             <React.Fragment key={idx}>
               <BreadcrumbItem>
-                {idx === schema.crumbs.length - 1 ? (
-                   <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
-                ) : (
-                   <BreadcrumbLink href={crumb.href || '#'}>{crumb.label}</BreadcrumbLink>
-                )}
+                <BreadcrumbLabel crumb={crumb} isLast={idx === schema.crumbs!.length - 1} />
               </BreadcrumbItem>
-              {idx < schema.crumbs.length - 1 && <BreadcrumbSeparator />}
+              {idx < schema.crumbs!.length - 1 && <BreadcrumbSeparator />}
             </React.Fragment>
           ))}
         </BreadcrumbList>
       </Breadcrumb>
+
+      <div className="ml-auto flex items-center gap-2">
+        {schema.search?.enabled && (
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder={schema.search.placeholder}
+              className="pl-8 w-[200px] lg:w-[300px]"
+            />
+            {schema.search.shortcut && (
+              <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                {schema.search.shortcut}
+              </kbd>
+            )}
+          </div>
+        )}
+        {schema.actions?.map((action, idx) => (
+          <SchemaRenderer key={idx} schema={action} />
+        ))}
+        {schema.rightContent && <SchemaRenderer schema={schema.rightContent} />}
+      </div>
     </header>
   ),
   {
     namespace: 'ui',
     label: 'Header Bar',
     inputs: [
-       { name: 'crumbs', type: 'array', label: 'Breadcrumbs' }
+       { name: 'crumbs', type: 'array', label: 'Breadcrumbs' },
+       { name: 'search', type: 'object', label: 'Search Configuration' },
+       { name: 'actions', type: 'array', label: 'Action Slots' },
+       { name: 'rightContent', type: 'object', label: 'Right Content' },
     ],
     defaultProps: {
       crumbs: [

package/src/stories/ConfigPanel.stories.tsx

@@ -0,0 +1,232 @@
+/**
+ * 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.
+ */
+
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfigPanelRenderer } from '../custom/config-panel-renderer';
+import { ConfigFieldRenderer } from '../custom/config-field-renderer';
+import { useConfigDraft } from '../hooks/use-config-draft';
+import type { ConfigPanelSchema, ConfigField } from '../types/config-panel';
+
+// ─── ConfigPanelRenderer Stories ─────────────────────────────────────────────
+
+const panelMeta = {
+  title: 'Config/ConfigPanelRenderer',
+  component: ConfigPanelRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ConfigPanelRenderer>;
+
+export default panelMeta;
+type Story = StoryObj<typeof panelMeta>;
+
+// Basic schema example
+const basicSchema: ConfigPanelSchema = {
+  breadcrumb: ['Settings', 'General'],
+  sections: [
+    {
+      key: 'basic',
+      title: 'Basic',
+      fields: [
+        { key: 'title', label: 'Title', type: 'input', placeholder: 'Enter title' },
+        { key: 'enabled', label: 'Enabled', type: 'switch', defaultValue: true },
+        {
+          key: 'mode',
+          label: 'Mode',
+          type: 'select',
+          options: [
+            { value: 'auto', label: 'Auto' },
+            { value: 'manual', label: 'Manual' },
+            { value: 'scheduled', label: 'Scheduled' },
+          ],
+          defaultValue: 'auto',
+        },
+      ],
+    },
+    {
+      key: 'appearance',
+      title: 'Appearance',
+      collapsible: true,
+      fields: [
+        { key: 'theme', label: 'Theme', type: 'select', options: [
+          { value: 'light', label: 'Light' },
+          { value: 'dark', label: 'Dark' },
+          { value: 'system', label: 'System' },
+        ], defaultValue: 'system' },
+        { key: 'accentColor', label: 'Accent color', type: 'color', defaultValue: '#3b82f6' },
+        { key: 'fontSize', label: 'Font size', type: 'slider', min: 10, max: 24, step: 1, defaultValue: 14 },
+      ],
+    },
+    {
+      key: 'advanced',
+      title: 'Advanced',
+      collapsible: true,
+      defaultCollapsed: true,
+      hint: 'These settings are for power users.',
+      fields: [
+        { key: 'debug', label: 'Debug mode', type: 'checkbox' },
+        { key: 'apiEndpoint', label: 'API endpoint', type: 'input', placeholder: 'https://...' },
+      ],
+    },
+  ],
+};
+
+function BasicPanelStory() {
+  const source = { title: 'My App', enabled: true, mode: 'auto', theme: 'system', accentColor: '#3b82f6', fontSize: 14, debug: false, apiEndpoint: '' };
+  const { draft, isDirty, updateField, discard } = useConfigDraft(source);
+  return (
+    <div style={{ position: 'relative', height: 600, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <ConfigPanelRenderer
+        open={true}
+        onClose={() => alert('Close clicked')}
+        schema={basicSchema}
+        draft={draft}
+        isDirty={isDirty}
+        onFieldChange={updateField}
+        onSave={() => alert('Saved: ' + JSON.stringify(draft, null, 2))}
+        onDiscard={discard}
+      />
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicPanelStory />,
+};
+
+// Dashboard-like schema
+const dashboardSchema: ConfigPanelSchema = {
+  breadcrumb: ['Dashboard', 'Layout'],
+  sections: [
+    {
+      key: 'layout',
+      title: 'Layout',
+      fields: [
+        { key: 'columns', label: 'Columns', type: 'slider', min: 1, max: 12, step: 1, defaultValue: 3 },
+        { key: 'gap', label: 'Gap', type: 'slider', min: 0, max: 16, step: 1, defaultValue: 4 },
+        { key: 'rowHeight', label: 'Row height', type: 'input', defaultValue: '120', placeholder: 'px' },
+      ],
+    },
+    {
+      key: 'data',
+      title: 'Data',
+      collapsible: true,
+      fields: [
+        { key: 'refreshInterval', label: 'Refresh interval', type: 'select', options: [
+          { value: '0', label: 'Manual' },
+          { value: '30', label: '30s' },
+          { value: '60', label: '1 min' },
+          { value: '300', label: '5 min' },
+        ], defaultValue: '0' },
+        { key: 'autoRefresh', label: 'Auto-refresh', type: 'switch', defaultValue: false },
+      ],
+    },
+    {
+      key: 'appearance',
+      title: 'Appearance',
+      collapsible: true,
+      defaultCollapsed: true,
+      fields: [
+        { key: 'showTitle', label: 'Show title', type: 'switch', defaultValue: true },
+        { key: 'showDescription', label: 'Show description', type: 'switch', defaultValue: true },
+        { key: 'theme', label: 'Theme', type: 'select', options: [
+          { value: 'light', label: 'Light' },
+          { value: 'dark', label: 'Dark' },
+          { value: 'auto', label: 'Auto' },
+        ], defaultValue: 'auto' },
+      ],
+    },
+  ],
+};
+
+function DashboardPanelStory() {
+  const source = { columns: 3, gap: 4, rowHeight: '120', refreshInterval: '0', autoRefresh: false, showTitle: true, showDescription: true, theme: 'auto' };
+  const { draft, isDirty, updateField, discard } = useConfigDraft(source);
+  return (
+    <div style={{ position: 'relative', height: 600, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <ConfigPanelRenderer
+        open={true}
+        onClose={() => alert('Close')}
+        schema={dashboardSchema}
+        draft={draft}
+        isDirty={isDirty}
+        onFieldChange={updateField}
+        onSave={() => alert('Saved!')}
+        onDiscard={discard}
+      />
+    </div>
+  );
+}
+
+export const DashboardConfig: Story = {
+  render: () => <DashboardPanelStory />,
+};
+
+// Custom field escape hatch
+const customSchema: ConfigPanelSchema = {
+  breadcrumb: ['View', 'Config'],
+  sections: [
+    {
+      key: 'main',
+      title: 'General',
+      fields: [
+        { key: 'name', label: 'View name', type: 'input' },
+        {
+          key: 'rowHeight',
+          label: 'Row height',
+          type: 'custom',
+          render: (value, onChange) => (
+            <div style={{ display: 'flex', gap: 4, padding: '4px 0' }}>
+              {['compact', 'medium', 'tall'].map((h) => (
+                <button
+                  key={h}
+                  onClick={() => onChange(h)}
+                  style={{
+                    padding: '2px 8px',
+                    fontSize: 11,
+                    borderRadius: 4,
+                    border: value === h ? '2px solid #3b82f6' : '1px solid #d1d5db',
+                    background: value === h ? '#eff6ff' : 'transparent',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {h}
+                </button>
+              ))}
+            </div>
+          ),
+        },
+      ],
+    },
+  ],
+};
+
+function CustomFieldStory() {
+  const source = { name: 'My Grid View', rowHeight: 'medium' };
+  const { draft, isDirty, updateField, discard } = useConfigDraft(source);
+  return (
+    <div style={{ position: 'relative', height: 400, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <ConfigPanelRenderer
+        open={true}
+        onClose={() => {}}
+        schema={customSchema}
+        draft={draft}
+        isDirty={isDirty}
+        onFieldChange={updateField}
+        onSave={() => alert('Saved!')}
+        onDiscard={discard}
+      />
+    </div>
+  );
+}
+
+export const CustomFieldEscapeHatch: Story = {
+  render: () => <CustomFieldStory />,
+};

package/src/types/config-panel.ts

@@ -0,0 +1,101 @@
+/**
+ * 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.
+ */
+
+/**
+ * Schema-driven config panel type definitions.
+ *
+ * Each concrete panel (View, Dashboard, Page…) provides a ConfigPanelSchema,
+ * and ConfigPanelRenderer auto-generates the UI.
+ */
+
+/** Supported control types for config fields */
+export type ControlType =
+  | 'input'
+  | 'switch'
+  | 'select'
+  | 'checkbox'
+  | 'slider'
+  | 'color'
+  | 'field-picker'
+  | 'filter'
+  | 'sort'
+  | 'icon-group'
+  | 'summary'
+  | 'custom';
+
+/** A single field within a config section */
+export interface ConfigField {
+  /** Field key in the draft object */
+  key: string;
+  /** Display label (may be an i18n key) */
+  label: string;
+  /** Control type determining which widget to render */
+  type: ControlType;
+  /** Default value for the field */
+  defaultValue?: any;
+  /** Select/icon-group options */
+  options?: Array<{ value: string; label: string; icon?: React.ReactNode }>;
+  /** Visibility predicate evaluated against the current draft */
+  visibleWhen?: (draft: Record<string, any>) => boolean;
+  /** Disabled predicate evaluated against the current draft */
+  disabledWhen?: (draft: Record<string, any>) => boolean;
+  /** Custom render function for type='custom' */
+  render?: (
+    value: any,
+    onChange: (v: any) => void,
+    draft: Record<string, any>,
+  ) => React.ReactNode;
+  /** Placeholder text for input/select controls */
+  placeholder?: string;
+  /** Help text displayed below the control */
+  helpText?: string;
+  /** Minimum value for slider */
+  min?: number;
+  /** Maximum value for slider */
+  max?: number;
+  /** Step value for slider */
+  step?: number;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Field definitions for filter/sort sub-editors */
+  fields?: Array<{ value: string; label: string; type?: string; options?: Array<{ value: string; label: string }> }>;
+  /** Summary display text for type='summary' */
+  summaryText?: string;
+  /** Click handler for the summary gear/action button (type='summary') */
+  onSummaryClick?: () => void;
+}
+
+/** A group of related config fields */
+export interface ConfigSection {
+  /** Unique section key (used for collapse state tracking) */
+  key: string;
+  /** Section title (may be an i18n key) */
+  title: string;
+  /** Hint text displayed below the title */
+  hint?: string;
+  /** Icon displayed before the section title (e.g. a Lucide icon element) */
+  icon?: React.ReactNode;
+  /** Whether this section supports collapse/expand */
+  collapsible?: boolean;
+  /** Default collapsed state */
+  defaultCollapsed?: boolean;
+  /** Fields belonging to this section */
+  fields: ConfigField[];
+  /** Nested sub-sections for complex grouping */
+  subsections?: ConfigSection[];
+  /** Visibility predicate evaluated against the current draft */
+  visibleWhen?: (draft: Record<string, any>) => boolean;
+}
+
+/** Top-level schema describing an entire config panel */
+export interface ConfigPanelSchema {
+  /** Breadcrumb segments displayed in the panel header */
+  breadcrumb: string[];
+  /** Ordered list of sections */
+  sections: ConfigSection[];
+}

package/src/ui/dialog.tsx

@@ -46,14 +46,31 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        // Mobile-first: full-screen
+        "fixed inset-0 z-50 grid w-full bg-background p-4 shadow-lg duration-200",
+        "h-[100dvh]",
+        // Desktop (sm+): centered dialog with border + rounded corners
+        "sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%]",
+        "sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6",
+        // Animations
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className={cn(
+        "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
+        "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        // Mobile touch target ≥ 44×44px (WCAG 2.5.5)
+        "min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center",
+      )}>
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

package/src/ui/sheet.tsx

@@ -59,14 +59,17 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  /** When true, the backdrop overlay is not rendered (useful for non-modal drawers) */
+  hideOverlay?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, children, hideOverlay, ...props }, ref) => (
   <SheetPortal>
-    <SheetOverlay />
+    {!hideOverlay && <SheetOverlay />}
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}