docs: Add shared debug state across all examples to simplify UI and be easily reachable (sticky)

Author: techniq

packages/layerchart/src/routes/docs/+layout.svelte

@@ -19,11 +19,16 @@
     ApiDocs,
     Button,
     Dialog,
+    Field,
     Icon,
     ListItem,
+    Menu,
+    Switch,
     TableOfContents,
+    Toggle,
     ToggleGroup,
     ToggleOption,
+    Tooltip,
   } from 'svelte-ux';
 
   import { MediaQueryPresets } from '@layerstack/svelte-state';
@@ -35,6 +40,9 @@
   import { page } from '$app/state';
   import { shared } from './shared.svelte.js';
 
+  // @ts-ignore
+  import IconSettings from '~icons/lucide/settings';
+
   const { children } = $props();
 
   const [type, name] = $derived(page.url.pathname.split('/').slice(2) ?? []);
@@ -116,25 +124,41 @@
         {/if}
       </span>
 
-      {#if supportedContexts}
-        <ToggleGroup
-          bind:value={shared.renderContext}
-          variant="fill"
-          color="primary"
-          inset
-          gap="px"
-          size="sm"
-        >
-          {#each supportedContexts as context}
-            <ToggleOption value={context}>{toTitleCase(context)}</ToggleOption>
-          {/each}
-        </ToggleGroup>
-      {/if}
+      <span class="flex items-center gap-1">
+        {#if supportedContexts}
+          <ToggleGroup
+            bind:value={shared.renderContext}
+            variant="fill"
+            color="primary"
+            inset
+            gap="px"
+            size="sm"
+          >
+            {#each supportedContexts as context}
+              <ToggleOption value={context}>{toTitleCase(context)}</ToggleOption>
+            {/each}
+          </ToggleGroup>
+        {/if}
+
+        <Toggle let:on={open} let:toggle let:toggleOff>
+          <Tooltip title="Settings">
+            <Button iconOnly on:click={toggle}>
+              <IconSettings class="text-surface-content" />
+              <Menu {open} on:close={toggleOff} placement="bottom-start" classes={{ menu: 'p-2' }}>
+                <label class="flex items-center gap-2">
+                  <span class="text-sm text-surface-content">Debug</span>
+                  <Switch bind:checked={shared.debug} />
+                </label>
+              </Menu>
+            </Button>
+          </Tooltip>
+        </Toggle>
+      </span>
 
       {#if status}
         <span
           class={cls(
-            'text-sm  px-2 rounded-sm',
+            'text-sm px-2 rounded-sm',
             status === 'beta' && 'bg-yellow-500/20 text-yellow-800',
             status === 'deprecated' && 'bg-red-500/20 text-red-900'
           )}

packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte

@@ -8,7 +8,7 @@
     LineChart,
     type Placement,
   } from 'layerchart';
-  import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux';
+  import { Button, Field, Menu, RangeField, Toggle } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -57,15 +57,11 @@
   let renderContext = $derived(
     shared.renderContext as ComponentProps<typeof LineChart>['renderContext']
   );
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<Field label="Debug" let:id classes={{ container: 'h-full' }}>
-  <Switch {id} bind:checked={debug} />
-</Field>
-
 <h2>Vertical</h2>
 
 <Preview data={data.appleStock}>

packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte

@@ -9,7 +9,7 @@
     Tooltip,
     type Placement,
   } from 'layerchart';
-  import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux';
+  import { Button, Field, Menu, RangeField, Toggle } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
   import { maxIndex } from 'd3-array';
 
@@ -58,17 +58,11 @@
   let radius = $state(4);
 
   let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>On axis with tooltip</h2>
 
 <Preview data={data.appleStock}>

packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte

@@ -2,7 +2,7 @@
   import type { ComponentProps } from 'svelte';
 
   import { AnnotationRange, BarChart, LineChart, type Placement } from 'layerchart';
-  import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux';
+  import { Button, Field, Menu, RangeField, Toggle } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -36,17 +36,11 @@
   let renderContext = $derived(
     shared.renderContext as ComponentProps<typeof LineChart>['renderContext']
   );
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>Horizontal with pattern, lower bound</h2>
 
 <Preview data={data.appleStock}>

packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte

@@ -32,17 +32,11 @@
   let renderContext = $derived(
     shared.renderContext as ComponentProps<typeof ArcChart>['renderContext']
   );
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>Single value</h2>
 
 <Preview data={[{ key: 'Example', value: 70 }]}>

packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte

@@ -23,7 +23,7 @@
   import { group } from 'd3-array';
   import { timeDay } from 'd3-time';
   import { scaleBand, scalePoint } from 'd3-scale';
-  import { Button, Field, Kbd, Switch } from 'svelte-ux';
+  import { Button, Kbd } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
@@ -130,7 +130,7 @@
   let renderContext = $derived(
     shared.renderContext as ComponentProps<typeof AreaChart>['renderContext']
   );
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 
   let markerPoints: { date: Date; value: number }[] = $state([]);
   let context = $state<ChartContextValue<(typeof denseDateSeriesData)[number]>>(null!);
@@ -166,12 +166,6 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>

packages/layerchart/src/routes/docs/components/Axis/+page.svelte

@@ -11,7 +11,7 @@
     timeYear,
     timeMillisecond,
   } from 'd3-time';
-  import { Field, RangeField, Switch } from 'svelte-ux';
+  import { RangeField } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -52,7 +52,7 @@
 
   let tickSpacing = $state(80); // x-axis default
 
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
@@ -454,15 +454,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>Axis label placements (top/bottom)</h2>
-
-  <div class="mb-2 flex gap-6">
-    <Field label="Debug:" dense labelPlacement="left" let:id>
-      <Switch {id} bind:checked={debug} />
-    </Field>
-  </div>
-</div>
+<h2>Axis label placements (top/bottom)</h2>
 
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
@@ -489,15 +481,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>Axis label placements (left/right)</h2>
-
-  <div class="mb-2 flex gap-6">
-    <Field label="Debug:" dense labelPlacement="left" let:id>
-      <Switch {id} bind:checked={debug} />
-    </Field>
-  </div>
-</div>
+<h2>Axis label placements (left/right)</h2>
 
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
@@ -520,15 +504,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>Multiple time axis with same placement (bottom)</h2>
-
-  <div class="mb-2 flex gap-6">
-    <Field label="Debug:" dense labelPlacement="left" let:id>
-      <Switch {id} bind:checked={debug} />
-    </Field>
-  </div>
-</div>
+<h2>Multiple time axis with same placement (bottom)</h2>
 
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
@@ -579,15 +555,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>Multiple different axis with same placement (right)</h2>
-
-  <div class="mb-2 flex gap-6">
-    <Field label="Debug:" dense labelPlacement="left" let:id>
-      <Switch {id} bind:checked={debug} />
-    </Field>
-  </div>
-</div>
+<h2>Multiple different axis with same placement (right)</h2>
 
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">

packages/layerchart/src/routes/docs/components/BarChart/+page.svelte

@@ -20,7 +20,6 @@
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries, wideData, longData } from '$lib/utils/genData.js';
-  import { Field, Switch } from 'svelte-ux';
   import { timeMonth } from 'd3-time';
   import { interpolate, quantize } from 'd3-interpolate';
   import { interpolateSpectral } from 'd3-scale-chromatic';
@@ -105,17 +104,11 @@
   ];
 
   let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>Vertical (default)</h2>
 
 <Preview data={dateSeriesData}>

packages/layerchart/src/routes/docs/components/LineChart/+page.svelte

@@ -88,17 +88,11 @@
   let show = $state(true);
 
   let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>

packages/layerchart/src/routes/docs/components/PieChart/+page.svelte

@@ -46,17 +46,11 @@
   let renderContext = $derived(
     shared.renderContext as ComponentProps<typeof PieChart>['renderContext']
   );
-  let debug = $state(false);
+  let debug = $derived(shared.debug);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
-
 <h2>Basic</h2>
 
 <Preview {data}>