entasis 0.12.0 → 0.13.1

package/dist/components/Form/VoiceInput/voiceInput.theme.d.ts

@@ -1,6 +1,6 @@
 import { type InferComponentTheme } from '../../../utils/cva/index.js';
 export declare const voiceInputTheme: {
-    root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             default: string;
             expandable: null;
@@ -10,8 +10,8 @@ export declare const voiceInputTheme: {
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -42,8 +42,8 @@ export declare const voiceInputTheme: {
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -58,8 +58,8 @@ export declare const voiceInputTheme: {
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    action: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    action: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -68,14 +68,18 @@ export declare const voiceInputTheme: {
         variant: {
             default: null;
             expandable: null;
-            compact: string;
+            compact: null;
         };
         recording: {
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    playbackAction: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        expanded: {
+            true: null;
+            false: null;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    playbackAction: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -90,8 +94,8 @@ export declare const voiceInputTheme: {
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    clearAction: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    clearAction: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -102,8 +106,8 @@ export declare const voiceInputTheme: {
             expandable: null;
             compact: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveformContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveformContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -117,8 +121,8 @@ export declare const voiceInputTheme: {
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveform: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveform: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -132,9 +136,9 @@ export declare const voiceInputTheme: {
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveformInput: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveformInput: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    timer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -144,19 +148,19 @@ export declare const voiceInputTheme: {
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type VoiceInputTheme = typeof voiceInputTheme;
 export type VoiceInputThemeProps = InferComponentTheme<VoiceInputTheme>;
 export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             default: string;
             expandable: null;
@@ -166,8 +170,8 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -198,8 +202,8 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -214,8 +218,8 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    action: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    action: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -224,14 +228,18 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
         variant: {
             default: null;
             expandable: null;
-            compact: string;
+            compact: null;
         };
         recording: {
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    playbackAction: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        expanded: {
+            true: null;
+            false: null;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    playbackAction: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -246,8 +254,8 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    clearAction: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    clearAction: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -258,8 +266,8 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             expandable: null;
             compact: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveformContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveformContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -273,8 +281,8 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveform: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveform: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -288,9 +296,9 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveformInput: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveformInput: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    timer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -300,17 +308,17 @@ export declare const setVoiceInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useVoiceInputTheme: import("../../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             default: string;
             expandable: null;
@@ -320,8 +328,8 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -352,8 +360,8 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -368,8 +376,8 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    action: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    action: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -378,14 +386,18 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
         variant: {
             default: null;
             expandable: null;
-            compact: string;
+            compact: null;
         };
         recording: {
             true: null;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    playbackAction: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        expanded: {
+            true: null;
+            false: null;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    playbackAction: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -400,8 +412,8 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    clearAction: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    clearAction: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -412,8 +424,8 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             expandable: null;
             compact: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveformContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveformContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: null;
             normal: null;
@@ -427,8 +439,8 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveform: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveform: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -442,9 +454,9 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    waveformInput: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    timer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    waveformInput: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    timer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -454,12 +466,12 @@ export declare const useVoiceInputTheme: import("../../../utils/cva/theme.js").U
             true: string;
             false: null;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Form/VoiceInput/voiceInput.theme.js

@@ -25,10 +25,12 @@ const defaultRoot = cva({
 const defaultInputContainer = cva({
     base: 'relative ml-auto flex w-full min-w-0 items-center overflow-hidden rounded-md border border-neutral-muted bg-surface-raised px-lg transition-[max-width,background-color,border-color,box-shadow] duration-slow ease-standard motion-reduce:transition-none focus-within:border-color/60 focus-within:ring-2 focus-within:ring-focus/50',
     variants: {
+        // One row height in every state (idle waveform, recording, error text, playback) and no
+        // vertical padding, so the edge action fills the box from top to bottom.
         size: {
-            small: 'min-h-row-sm gap-sm py-sm',
-            normal: 'min-h-row-md gap-md py-sm',
-            large: 'min-h-row-lg gap-md py-md'
+            small: 'min-h-row-sm gap-sm',
+            normal: 'min-h-row-md gap-md',
+            large: 'min-h-row-lg gap-md'
         },
         recording: {
             true: 'border-color/50',
@@ -179,27 +181,45 @@ const defaultAction = cva({
         variant: {
             default: null,
             expandable: null,
-            compact: 'relative isolate !m-0 !self-auto !rounded-full !overflow-visible before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-full before:border before:border-color/55 before:[opacity:calc(var(--voice-input-level)*0.7)] before:[transform:scale(calc(1+var(--voice-input-level)*0.55))] before:transition-[transform,opacity] before:duration-fast before:ease-standard before:content-[""] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-full after:border after:border-color/30 after:[opacity:calc(var(--voice-input-level)*0.45)] after:[transform:scale(calc(1+var(--voice-input-level)*1.05))] after:transition-[transform,opacity] after:duration-normal after:ease-standard after:content-[""] motion-reduce:before:transition-none motion-reduce:after:transition-none'
+            compact: null
         },
         recording: {
             true: null,
             false: null
+        },
+        expanded: {
+            true: null,
+            false: null
         }
     },
     compoundVariants: [
+        // A collapsed expandable input is the mic alone: a regular ghost button, not the flush,
+        // square edge action it becomes once the field opens around it.
+        { variant: 'expandable', expanded: false, class: '!m-0 !self-auto !rounded-md' },
+        { variant: 'expandable', expanded: false, size: 'small', class: '!size-8' },
+        { variant: 'expandable', expanded: false, size: 'normal', class: '!size-9' },
+        { variant: 'expandable', expanded: false, size: 'large', class: '!size-10' },
         {
             variant: 'compact',
             recording: true,
             class: '!border-color !bg-color !text-color-contrast lift-1'
         },
-        { variant: 'compact', size: 'small', class: '!size-8' },
-        { variant: 'compact', size: 'normal', class: '!size-9' },
-        { variant: 'compact', size: 'large', class: '!size-10' }
+        // Compact is a round mic with level rings while collapsed; it only expands to show an
+        // error, and then takes the flush edge like every other field action.
+        {
+            variant: 'compact',
+            expanded: false,
+            class: 'relative isolate !m-0 !self-auto !rounded-full !overflow-visible before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-full before:border before:border-color/55 before:[opacity:calc(var(--voice-input-level)*0.7)] before:[transform:scale(calc(1+var(--voice-input-level)*0.55))] before:transition-[transform,opacity] before:duration-fast before:ease-standard before:content-[""] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-full after:border after:border-color/30 after:[opacity:calc(var(--voice-input-level)*0.45)] after:[transform:scale(calc(1+var(--voice-input-level)*1.05))] after:transition-[transform,opacity] after:duration-normal after:ease-standard after:content-[""] motion-reduce:before:transition-none motion-reduce:after:transition-none'
+        },
+        { variant: 'compact', expanded: false, size: 'small', class: '!size-8' },
+        { variant: 'compact', expanded: false, size: 'normal', class: '!size-9' },
+        { variant: 'compact', expanded: false, size: 'large', class: '!size-10' }
     ],
     defaultVariants: {
         size: 'normal',
         variant: 'default',
-        recording: false
+        recording: false,
+        expanded: true
     }
 });
 const defaultPlaybackAction = cva({

package/dist/components/GanttChart/GanttChart.svelte.d.ts

@@ -237,7 +237,7 @@ declare function $$render<TTaskFields extends object = Record<never, never>, TDe
         canRedo: () => boolean;
         cancelInteraction: () => void;
     };
-    bindings: "ref" | "selection" | "zoom" | "dependencies" | "tasks" | "assignments" | "expandedTaskIds" | "gridWidth";
+    bindings: "ref" | "selection" | "zoom" | "tasks" | "dependencies" | "assignments" | "expandedTaskIds" | "gridWidth";
     slots: {};
     events: {};
 };
@@ -245,7 +245,7 @@ declare class __sveltets_Render<TTaskFields extends object = Record<never, never
     props(): ReturnType<typeof $$render<TTaskFields, TDependencyFields, TResourceFields, TAssignmentFields>>['props'];
     events(): ReturnType<typeof $$render<TTaskFields, TDependencyFields, TResourceFields, TAssignmentFields>>['events'];
     slots(): ReturnType<typeof $$render<TTaskFields, TDependencyFields, TResourceFields, TAssignmentFields>>['slots'];
-    bindings(): "ref" | "selection" | "zoom" | "dependencies" | "tasks" | "assignments" | "expandedTaskIds" | "gridWidth";
+    bindings(): "ref" | "selection" | "zoom" | "tasks" | "dependencies" | "assignments" | "expandedTaskIds" | "gridWidth";
     exports(): {
         fitProject: () => boolean;
         zoomIn: (anchorDate?: Date) => boolean;

package/dist/components/GanttChart/GanttChartShell.svelte

@@ -50,6 +50,7 @@
 	import type { Density } from '../../types/theme.js';
 	import { createVirtualizer } from '@tanstack/svelte-virtual';
 	import { get } from 'svelte/store';
+	import { untrack } from 'svelte';
 	import GanttTimeline from './GanttTimeline.svelte';
 	import GanttTreeGrid from './GanttTreeGrid.svelte';
 	import { resolveGanttColumns } from './ganttChart.columns.js';
@@ -244,6 +245,24 @@
 		defaultContent: defaultLoading
 	});
 
+	// A narrow chart (a phone, a side panel) would otherwise give the grid its whole default width
+	// and leave the timeline a sliver: the first layout there starts the grid at 45% at most. Once,
+	// so the splitter stays the user's to drag wider.
+	const NARROW_CHART_REM = 40;
+	const NARROW_GRID_SHARE = 0.45;
+	let narrowFitted = false;
+	$effect.pre(() => {
+		if (narrowFitted || containerWidth <= 0) return;
+		narrowFitted = true;
+		const rootFontSize =
+			typeof document === 'undefined'
+				? 16
+				: parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+		if (containerWidth >= NARROW_CHART_REM * rootFontSize) return;
+		const fitted = Math.max(chart.minGridWidth, Math.round(containerWidth * NARROW_GRID_SHARE));
+		if (untrack(() => chart.gridWidth) > fitted) chart.gridWidth = fitted;
+	});
+
 	$effect.pre(() => {
 		validateGridMetrics(chart.gridWidth, chart.rowHeight);
 		if (containerWidth <= 0) return;