@fragments-sdk/viewer 0.2.1 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/viewer",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "license": "FSL-1.1-MIT",
   "description": "Viewer shell — Storybook-like React UI for previewing Fragments components, shared doc layouts, and devtools panels",
   "author": "Conan McNicholl",
@@ -37,25 +37,32 @@
     "*.css"
   ],
   "dependencies": {
+    "@babel/parser": "^7.28.6",
+    "@babel/types": "^7.28.5",
     "@phosphor-icons/react": "^2.1.10",
     "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.18",
     "axe-core": "^4.11.1",
+    "clsx": "^2.1.1",
     "html2canvas": "^1.4.1",
     "monaco-editor": "^0.55.1",
     "react-colorful": "^5.6.1",
     "react-hook-form": "^7.71.0",
     "react-live": "^4.1.6",
     "shiki": "^3.21.0",
-    "@fragments-sdk/core": "0.2.0",
-    "@fragments-sdk/ui": "0.14.0"
+    "zod": "^4.1.11",
+    "@fragments-sdk/ui": "0.16.0",
+    "@fragments-sdk/context": "0.5.0",
+    "@fragments-sdk/core": "1.0.0",
+    "@fragments-sdk/webmcp": "2.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@types/node": "^22.13.10",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "vite": "^6.0.0",

package/src/components/App.tsx

@@ -56,12 +56,30 @@ interface AppProps {
   fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 }
 
+function valuesEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true;
+  if (
+    a &&
+    b &&
+    typeof a === "object" &&
+    typeof b === "object"
+  ) {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch {
+      return false;
+    }
+  }
+  return false;
+}
+
 export function App({ fragments }: AppProps) {
   // URL state management
   const {
     state: urlState,
     setComponent: setUrlComponent,
     setVariant: setUrlVariant,
+    setProps: setUrlProps,
     setViewSettings: setUrlViewSettings,
     copyUrl,
   } = useUrlState();
@@ -122,6 +140,8 @@ export function App({ fragments }: AppProps) {
   const safeVariantIndex = variantCount > 0 ? Math.min(activeVariantIndex, variantCount - 1) : 0;
   const activeVariant = variants[safeVariantIndex];
   const figmaUrl = activeVariant?.figma || activeFragment?.fragment.meta.figma;
+  const propOverrides = urlState.props;
+  const hasPropOverrides = Object.keys(propOverrides).length > 0;
 
   // Figma integration
   const figmaIntegration = useFigmaIntegration({
@@ -143,6 +163,35 @@ export function App({ fragments }: AppProps) {
     clearActionLogs();
   }, [activeFragmentPath, activeVariantIndex, clearActionLogs]);
 
+  const activePropValues = useMemo(
+    () => ({
+      ...(activeVariant?.args ?? {}),
+      ...propOverrides,
+    }),
+    [activeVariant, propOverrides]
+  );
+
+  const handlePropValueChange = useCallback(
+    (name: string, value: unknown) => {
+      const baseValue = activeVariant?.args?.[name];
+      const propDefault = activeFragment?.fragment.props?.[name]?.default;
+      const compareTarget = baseValue !== undefined ? baseValue : propDefault;
+
+      const next = { ...propOverrides };
+      if (value === undefined || valuesEqual(value, compareTarget)) {
+        delete next[name];
+      } else {
+        next[name] = value;
+      }
+      setUrlProps(next);
+    },
+    [activeFragment, activeVariant, propOverrides, setUrlProps]
+  );
+
+  const handleResetPropValues = useCallback(() => {
+    setUrlProps({});
+  }, [setUrlProps]);
+
   // Extract rendered styles after component renders
   useEffect(() => {
     if (uiState.showComparison && activeVariant) {
@@ -336,11 +385,12 @@ export function App({ fragments }: AppProps) {
       showHelp: uiActions.toggleShortcutsHelp,
       openSearch: () => uiActions.setCommandPalette(true),
       escape: () => {
-        if (document.activeElement === searchInputRef.current) {
+        const activeSearchInput = searchInputRef.current;
+        if (document.activeElement === activeSearchInput) {
           if (searchQuery) {
             setSearchQuery("");
           } else {
-            searchInputRef.current.blur();
+            activeSearchInput?.blur();
           }
           return;
         }
@@ -353,10 +403,17 @@ export function App({ fragments }: AppProps) {
   // Render variant with action logging via DOM event capture
   const renderVariantWithProps = useCallback((variant: FragmentVariant | undefined) => {
     if (!variant) return null;
+    const applyOverrides =
+      hasPropOverrides &&
+      activeVariant &&
+      variant === activeVariant;
 
     return (
       <ActionCapture onAction={useActionsRef.current.logAction}>
-        <FragmentRenderer variant={variant}>
+        <FragmentRenderer
+          variant={variant}
+          argsOverrides={applyOverrides ? propOverrides : undefined}
+        >
           {(content, isLoading, error) => {
             if (isLoading)
               return (
@@ -385,7 +442,7 @@ export function App({ fragments }: AppProps) {
         </FragmentRenderer>
       </ActionCapture>
     );
-  }, []);
+  }, [activeVariant, hasPropOverrides, propOverrides]);
 
   // Check if isolated mode
   const isIsolated = useMemo(() => {
@@ -502,6 +559,8 @@ export function App({ fragments }: AppProps) {
                     showComparison={uiState.showComparison}
                     figmaUrl={figmaUrl}
                     allFigmaUrls={allFigmaUrls}
+                    activeVariantIndex={safeVariantIndex}
+                    variantArgsOverrides={hasPropOverrides ? propOverrides : undefined}
                     onSelectVariant={(index) => {
                       uiActions.setMatrixView(false);
                       handleSelectVariant(index);
@@ -584,6 +643,10 @@ export function App({ fragments }: AppProps) {
                   const target = fragments.find((s) => s.fragment.meta.name === name);
                   if (target) handleSelectFragment(target.path);
                 }}
+                propValues={activePropValues}
+                onChangePropValue={handlePropValueChange}
+                onResetPropValues={handleResetPropValues}
+                hasPropOverrides={hasPropOverrides}
                 previewKey={uiState.previewKey}
                 fragmentKey={`${activeFragmentPath}-${safeVariantIndex}`}
               />

package/src/components/BottomPanel.tsx

@@ -1,7 +1,7 @@
 /**
  * BottomPanel component - the tabbed panel at the bottom of the viewer.
  * Uses the Drawer component from @fragments-sdk/ui as a non-modal bottom sheet.
- * Contains Styles, Accessibility, Interactions, Graph, and Performance tabs.
+ * Contains Styles, Controls, Accessibility, Interactions, Graph, and Performance tabs.
  */
 
 import { memo, useCallback, useState, useEffect, useRef } from "react";
@@ -14,6 +14,7 @@ import { AccessibilityPanel } from "./AccessibilityPanel.js";
 import { InteractionsPanel } from "./InteractionsPanel.js";
 import { ComponentGraph } from "./ComponentGraph.js";
 import { PerformancePanel } from "./PerformancePanel.js";
+import { PropsEditor } from "./PropsEditor.js";
 import type { ActivePanel } from "../hooks/useAppState.js";
 
 // Persist panel height to localStorage
@@ -62,6 +63,10 @@ interface BottomPanelProps {
 
   // Navigation
   onNavigateToComponent: (name: string) => void;
+  propValues: Record<string, unknown>;
+  onChangePropValue: (name: string, value: unknown) => void;
+  onResetPropValues: () => void;
+  hasPropOverrides: boolean;
 
   // Keys
   previewKey: number;
@@ -84,6 +89,10 @@ export const BottomPanel = memo(function BottomPanel({
   onFetchFigma,
   onRefreshRendered,
   onNavigateToComponent,
+  propValues,
+  onChangePropValue,
+  onResetPropValues,
+  hasPropOverrides,
   previewKey,
   fragmentKey,
 }: BottomPanelProps) {
@@ -149,6 +158,8 @@ export const BottomPanel = memo(function BottomPanel({
     [handleStylesClick, onPanelChange]
   );
 
+  const hasControls = Object.keys(fragment.props || {}).length > 0;
+
   return (
     <Drawer open={open} onOpenChange={onOpenChange} modal={false}>
       {/* Floating trigger FAB — fixed bottom-right, moves up when drawer is open */}
@@ -232,6 +243,7 @@ export const BottomPanel = memo(function BottomPanel({
           <Tabs value={activePanel} onValueChange={handleTabChange}>
             <Tabs.List variant="pills">
               {figmaUrl && <Tabs.Tab value="styles">Styles</Tabs.Tab>}
+              {hasControls && <Tabs.Tab value="controls">Controls</Tabs.Tab>}
               <Tabs.Tab value="accessibility">Accessibility</Tabs.Tab>
               {variant?.hasPlayFunction && (
                 <Tabs.Tab value="interactions">Interactions</Tabs.Tab>
@@ -256,6 +268,24 @@ export const BottomPanel = memo(function BottomPanel({
             />
           )}
 
+          {activePanel === "controls" && (
+            <div style={{ padding: "16px" }}>
+              {hasControls ? (
+                <PropsEditor
+                  props={fragment.props}
+                  values={propValues}
+                  onChange={onChangePropValue}
+                  onReset={onResetPropValues}
+                  hasChanges={hasPropOverrides}
+                />
+              ) : (
+                <div style={{ color: "var(--text-secondary)" }}>
+                  No documented props available for this component.
+                </div>
+              )}
+            </div>
+          )}
+
           {activePanel === "accessibility" && (
             <AccessibilityPanel
               cacheKey={fragmentKey}

package/src/components/ComponentGraph.tsx

@@ -163,7 +163,7 @@ export function ComponentGraph({ fragment, allFragments, onNavigate }: Component
     title: "No relationships defined",
     description: (
       <>
-        Add a <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>relations</Box> array to your fragment definition to visualize component connections.
+        Add a <code style={{ fontSize: '12px', display: 'inline', background: 'var(--bg-secondary)', borderRadius: '4px', padding: '2px 4px' }}>relations</code> array to your fragment definition to visualize component connections.
       </>
     ),
     action: (

package/src/components/EmptyVariantMessage.tsx

@@ -8,7 +8,7 @@ interface EmptyVariantMessageProps {
 
 export function EmptyVariantMessage({ reason, variantName, hint }: EmptyVariantMessageProps) {
   return (
-    <Alert variant="warning">
+    <Alert severity="warning">
       <Alert.Body>
         <Alert.Title>Variant "{variantName}" rendered empty</Alert.Title>
         <Alert.Content>

package/src/components/ErrorBoundary.tsx

@@ -46,7 +46,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
       const { error, errorInfo } = this.state;
 
       return (
-        <Alert variant="error">
+        <Alert severity="error">
           <Alert.Icon>
             <ErrorIcon style={{ width: '24px', height: '24px' }} />
           </Alert.Icon>
@@ -71,9 +71,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
                     </Collapsible.Trigger>
                     <Collapsible.Content>
                       <div style={{ marginTop: '8px' }}>
-                        <CodeBlock language="plaintext">
-                          {error?.stack || errorInfo.componentStack}
-                        </CodeBlock>
+                        <CodeBlock language="plaintext" code={error?.stack || errorInfo.componentStack} />
                       </div>
                     </Collapsible.Content>
                   </Collapsible>

package/src/components/FragmentRenderer.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 import {
   PreviewVariantRuntime,
   type FragmentVariant,
@@ -7,6 +7,8 @@ import {
 interface FragmentRendererProps {
   /** The variant to render */
   variant: FragmentVariant;
+  /** Optional args/props overrides to apply when rendering this variant */
+  argsOverrides?: Record<string, unknown>;
   /** Children render function - receives rendered content */
   children: (content: ReactNode | null, isLoading: boolean, error: Error | null) => ReactNode;
 }
@@ -21,10 +23,31 @@ interface FragmentRendererProps {
  *
  * If no loaders, renders immediately.
  */
-export function FragmentRenderer({ variant, children }: FragmentRendererProps) {
+export function FragmentRenderer({ variant, argsOverrides, children }: FragmentRendererProps) {
+  const runtimeVariant = useMemo(() => {
+    if (!argsOverrides || Object.keys(argsOverrides).length === 0) {
+      return variant;
+    }
+
+    return {
+      ...variant,
+      render: ((options) =>
+        variant.render({
+          ...options,
+          args: {
+            ...(variant.args ?? {}),
+            ...(options?.args ?? {}),
+            ...argsOverrides,
+          },
+        })) as FragmentVariant["render"],
+    } as FragmentVariant;
+  }, [variant, argsOverrides]);
+
   return (
-    <PreviewVariantRuntime variant={variant}>
-      {({ content, isLoading, error }) => children(content, isLoading, error)}
+    <PreviewVariantRuntime variant={runtimeVariant}>
+      {({ content, isLoading, error }) => (
+        <>{children(content as ReactNode | null, isLoading, error)}</>
+      )}
     </PreviewVariantRuntime>
   );
 }

package/src/components/HeaderSearch.tsx

@@ -4,7 +4,7 @@ import { Header, Input } from "@fragments-sdk/ui";
 interface HeaderSearchProps {
   value: string;
   onChange: (value: string) => void;
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: RefObject<HTMLInputElement | null>;
 }
 
 export function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {

package/src/components/InteractionsPanel.tsx

@@ -432,11 +432,11 @@ export function InteractionsPanel({
     title: "No interactions defined",
     description: (
       <>
-        This variant doesn't have a play function. Add a <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>play</Box> function to your Storybook story to enable interaction testing.
+        This variant doesn't have a play function. Add a <code style={{ fontSize: '12px', display: 'inline', background: 'var(--bg-secondary)', borderRadius: '4px', padding: '2px 4px' }}>play</code> function to your Storybook story to enable interaction testing.
       </>
     ),
     action: (
-      <CodeBlock language="typescript">{`export const Default = {
+      <CodeBlock language="typescript" code={`export const Default = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
@@ -450,7 +450,7 @@ export function InteractionsPanel({
       canvas.getByText('Clicked!')
     ).toBeInTheDocument();
   }
-};`}</CodeBlock>
+};`} />
     ),
   } : undefined;
 
@@ -504,7 +504,7 @@ export function InteractionsPanel({
         <Button
           onClick={() => runInteractions(debugState.mode === 'debug')}
           disabled={result.status === "running"}
-          variant={result.status === "running" || result.status === "paused" ? "outline" : "solid"}
+          variant={result.status === "running" || result.status === "paused" ? "outline" : "primary"}
           size="sm"
           style={
             result.status === "running" || result.status === "paused"
@@ -557,7 +557,7 @@ export function InteractionsPanel({
                 : result.status === 'paused' ? 'warning'
                 : 'info';
               return (
-                <Alert variant={alertVariant}>
+                <Alert severity={alertVariant}>
                   <Alert.Body>
                     <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
                       <Stack direction="row" align="center" gap="sm">

package/src/components/LoadErrorMessage.tsx

@@ -33,7 +33,7 @@ export function LoadErrorMessage({ error, componentName }: LoadErrorMessageProps
 
   return (
     <Stack align="center" justify="center" style={{ height: "100%", padding: "24px" }}>
-      <Alert variant="warning">
+      <Alert severity="warning">
         <Alert.Body>
           <Alert.Title>{hasMissingDeps ? "Missing Dependencies" : "Failed to Load"}</Alert.Title>
           <Alert.Content>
@@ -47,19 +47,17 @@ export function LoadErrorMessage({ error, componentName }: LoadErrorMessageProps
                   <Text size="xs" weight="semibold" color="secondary">
                     Install with:
                   </Text>
-                  <Box
-                    as="code"
-                    padding="sm"
-                    background="tertiary"
-                    rounded="sm"
-                    style={{
-                      display: "block",
-                      fontFamily: "monospace",
-                      fontSize: "12px",
-                      userSelect: "all",
-                    }}
-                  >
-                    {installCmd}
+                  <Box padding="sm" background="tertiary" rounded="sm">
+                    <code
+                      style={{
+                        display: "block",
+                        fontFamily: "monospace",
+                        fontSize: "12px",
+                        userSelect: "all",
+                      }}
+                    >
+                      {installCmd}
+                    </code>
                   </Box>
                   <Text size="xs" color="tertiary">
                     After installing, restart the dev server.
@@ -74,22 +72,20 @@ export function LoadErrorMessage({ error, componentName }: LoadErrorMessageProps
                   <Text size="xs" weight="semibold" color="secondary">
                     Error:
                   </Text>
-                  <Box
-                    as="pre"
-                    padding="sm"
-                    background="tertiary"
-                    rounded="sm"
-                    style={{
-                      fontFamily: "monospace",
-                      fontSize: "11px",
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word",
-                      margin: 0,
-                      maxHeight: "200px",
-                      overflow: "auto",
-                    }}
-                  >
-                    {errorMessage}
+                  <Box padding="sm" background="tertiary" rounded="sm">
+                    <pre
+                      style={{
+                        fontFamily: "monospace",
+                        fontSize: "11px",
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-word",
+                        margin: 0,
+                        maxHeight: "200px",
+                        overflow: "auto",
+                      }}
+                    >
+                      {errorMessage}
+                    </pre>
                   </Box>
                 </>
               )}

package/src/components/NoVariantsMessage.tsx

@@ -25,7 +25,7 @@ export function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
 
   return (
     <Stack align="center" justify="center" style={{ height: "100%", padding: "24px" }}>
-      <Alert variant="info">
+      <Alert severity="info">
         <Alert.Body>
           <Alert.Title>
             {skippedVariants.length} variant{skippedVariants.length === 1 ? "" : "s"} skipped

package/src/components/PanelShell.tsx

@@ -85,7 +85,7 @@ export function PanelShell({
     if (error) {
       return (
         <Box overflow="auto" padding={padding} style={{ flex: 1 }}>
-          <Alert variant="danger">{error}</Alert>
+          <Alert severity="error">{error}</Alert>
         </Box>
       );
     }

package/src/components/PerformancePanel.tsx

@@ -53,11 +53,11 @@ function formatBytes(bytes: number): string {
   return kb < 10 ? `${kb.toFixed(1)} KB` : `${Math.round(kb)} KB`;
 }
 
-function tierVariant(tier: string): 'success' | 'warning' | 'danger' {
+function tierVariant(tier: string): 'success' | 'warning' | 'error' {
   switch (tier) {
     case 'lightweight': return 'success';
     case 'moderate': return 'warning';
-    case 'heavy': return 'danger';
+    case 'heavy': return 'error';
     default: return 'warning';
   }
 }
@@ -220,7 +220,7 @@ export function PerformancePanel({ componentName }: PerformancePanelProps) {
     title: "No performance data",
     description: (
       <>
-        Run <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline', fontFamily: 'var(--fui-font-mono, monospace)' }}>{BRAND.cliCommand} perf</Box> to measure bundle sizes, then reload the viewer.
+        Run <code style={{ fontSize: '12px', display: 'inline', fontFamily: 'var(--fui-font-mono, monospace)', background: 'var(--bg-secondary)', borderRadius: '4px', padding: '2px 4px' }}>{BRAND.cliCommand} perf</code> to measure bundle sizes, then reload the viewer.
       </>
     ),
   } : undefined;
@@ -233,7 +233,7 @@ export function PerformancePanel({ componentName }: PerformancePanelProps) {
     <PanelShell loading={loading} empty={emptyConfig}>
       <Stack gap="md">
         {overBudget && (
-          <Alert variant="danger">
+          <Alert severity="error">
             <strong>{componentName}</strong> exceeds its performance budget ({budgetPercent}% of allowed size).
             Consider code splitting, lazy loading heavy dependencies, or tree-shaking unused exports.
           </Alert>

package/src/components/PreviewArea.tsx

@@ -36,6 +36,8 @@ interface PreviewAreaProps {
   showComparison: boolean;
   figmaUrl?: string;
   allFigmaUrls: string[];
+  activeVariantIndex?: number;
+  variantArgsOverrides?: Record<string, unknown>;
   onSelectVariant: (index: number) => void;
   onRetry: () => void;
   renderContent: () => ReactNode;
@@ -57,6 +59,8 @@ export function PreviewArea({
   showComparison,
   figmaUrl,
   allFigmaUrls,
+  activeVariantIndex,
+  variantArgsOverrides,
   onSelectVariant,
   onRetry,
   renderContent,
@@ -73,6 +77,8 @@ export function PreviewArea({
         zoom={zoom}
         previewTheme={previewTheme}
         useIframeIsolation={useIframeIsolation}
+        activeVariantIndex={activeVariantIndex}
+        variantArgsOverrides={variantArgsOverrides}
         onSelectVariant={onSelectVariant}
       />
     );

package/src/components/PropsEditor.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { PropDefinition } from '@fragments-sdk/core';
-import { Box, Stack, Text, Button, Badge, Card, Input, Select, Toggle } from "@fragments-sdk/ui";
+import { Box, Stack, Text, Button, Badge, Card, Input, Toggle } from "@fragments-sdk/ui";
 import { ControlsIcon, ChevronDownIcon, RefreshIcon } from "./Icons.js";
 
 interface PropsEditorProps {
@@ -242,16 +242,25 @@ function EnumControl({
   onChange: (v: string) => void;
 }) {
   return (
-    <Select
+    <select
       value={value}
-      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onChange(e.target.value)}
+      onChange={(e) => onChange(e.target.value)}
+      style={{
+        minWidth: '140px',
+        padding: '6px 8px',
+        borderRadius: '6px',
+        border: '1px solid var(--border)',
+        background: 'var(--bg-primary)',
+        color: 'var(--text-primary)',
+        fontSize: '12px',
+      }}
     >
       {values.map((v) => (
         <option key={v} value={v}>
           {v}
         </option>
       ))}
-    </Select>
+    </select>
   );
 }
 
@@ -260,19 +269,16 @@ function NumberControl({
   onChange,
 }: {
   value: number;
-  onChange: (v: number) => void;
+  onChange: (v: number | undefined) => void;
 }) {
   return (
     <Input
       type="number"
-      value={value ?? ""}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-        onChange(
-          e.target.value
-            ? Number(e.target.value)
-            : (undefined as unknown as number)
-        )
-      }
+      value={value == null ? "" : String(value)}
+      onChange={(nextValue) => {
+        const parsedValue = nextValue ? Number(nextValue) : undefined;
+        onChange(parsedValue === undefined || Number.isNaN(parsedValue) ? undefined : parsedValue);
+      }}
       style={{ width: '128px', fontFamily: 'monospace' }}
     />
   );
@@ -291,7 +297,7 @@ function StringControl({
     <Input
       type="text"
       value={value ?? ""}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      onChange={onChange}
       style={compact
         ? { width: '96px', fontSize: '11px', fontFamily: 'monospace' }
         : { width: '100%', maxWidth: '320px', fontFamily: 'monospace' }
@@ -422,7 +428,7 @@ function ColorControl({
       <Input
         type="text"
         value={value ?? ""}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        onChange={onChange}
         placeholder="#000000"
         style={{ width: '96px', fontSize: '11px', fontFamily: 'monospace' }}
       />
@@ -463,13 +469,23 @@ function DateControl({
     : "";
 
   return (
-    <Input
+    <input
       type="datetime-local"
       value={inputValue}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange={(e) => {
         const date = e.target.value ? new Date(e.target.value).toISOString() : "";
         onChange(date);
       }}
+      style={{
+        width: '100%',
+        maxWidth: '240px',
+        padding: '6px 8px',
+        borderRadius: '6px',
+        border: '1px solid var(--border)',
+        background: 'var(--bg-primary)',
+        color: 'var(--text-primary)',
+        fontSize: '12px',
+      }}
     />
   );
 }