@quaffui/quaff 1.0.0-beta6 → 1.0.0-beta9

package/dist/components/list/QList.svelte

@@ -1,8 +1,17 @@
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { QListCtxName } from "../../utils";
+<script lang="ts" module>
+  import { QContext } from "../../utils";
   import type { QListProps } from "./props";
 
+  interface QListContext {
+    readonly activeClass: string | undefined;
+    readonly separatorOptions: QListProps["separatorOptions"];
+  }
+
+  export const listCtx = QContext<QListContext>("QList");
+</script>
+
+<script lang="ts">
+  // #region:    --- Props
   let {
     bordered = false,
     roundedBorders = false,
@@ -15,15 +24,28 @@
     children,
     ...props
   }: QListProps = $props();
+  // #endregion: --- Props
 
-  setContext(QListCtxName.activeClass, () => activeClass);
-  setContext(QListCtxName.separator, separator ? separatorOptions : undefined);
-
+  // #region:    --- Non-reactive variables
   let listEl: HTMLElement;
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Context
+  listCtx.set({
+    get activeClass() {
+      return activeClass;
+    },
+    get separatorOptions() {
+      return separator ? separatorOptions : undefined;
+    },
+  });
+  // #endregion: --- Context
 
+  // #region:    --- Effects
   $effect(() => {
     listEl.querySelector(".q-separator__wrapper:first-child")?.remove();
   });
+  // #endregion: --- Effects
 </script>
 
 <svelte:element

package/dist/components/list/QList.svelte.d.ts

@@ -1,4 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
+import type { QListProps } from "./props";
+interface QListContext {
+    readonly activeClass: string | undefined;
+    readonly separatorOptions: QListProps["separatorOptions"];
+}
+export declare const listCtx: {
+    readonly symbol: symbol;
+    get(): QListContext | undefined;
+    assertGet(errorMsg?: string): QListContext;
+    set(context: QListContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof QListContext, value: string | Omit<import("../separator/props").QSeparatorHorizontalProps, "vertical"> | undefined): void;
+    updateEntries(updates: Partial<QListContext>): void;
+};
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/dist/components/private/ContextReseter.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { QContext } from "../../classes/QContext.svelte";
-  import type { Snippet } from "svelte";
+  import { setContext, type Snippet } from "svelte";
 
   let {
     keys,
@@ -11,7 +10,7 @@
   } = $props();
 
   const keysArr = Array.isArray(keys) ? keys : [keys];
-  keysArr.forEach((key) => QContext.reset(key));
+  keysArr.forEach((key) => setContext(key, undefined));
 </script>
 
 {@render children?.()}

package/dist/components/private/QApi.svelte

@@ -21,12 +21,26 @@
   } from "../../utils";
   import type { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
 
+  // #region:    --- Props
   let { componentDocs }: { componentDocs: QComponentDocs[] } = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Reactive variables
   let api: (keyof QComponentDocs["docs"])[] = $state(
     componentDocs.map(() => "props"),
   );
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Effects
+  $effect(() => {
+    // Doesn't rerun if we don't use JSON.stringify
+    JSON.stringify(api);
+
+    attachTooltips();
+  });
+  // #endregion: --- Effects
+
+  // #region:    --- Functions
   function getType(type: string) {
     type = type.replace("[]", "");
     let found = type in Types ? Types[type as keyof typeof Types] : undefined;
@@ -195,13 +209,7 @@
       });
     });
   }
-
-  $effect(() => {
-    // Doesn't rerun if we don't use JSON.stringify
-    JSON.stringify(api);
-
-    attachTooltips();
-  });
+  // #endregion: --- Functions
 </script>
 
 {#each componentDocs as QDocument, index (index)}

package/dist/components/private/QDocs.svelte

@@ -1,9 +1,29 @@
+<script lang="ts" module>
+  import { QContext } from "../../utils";
+
+  interface Props {
+    children?: Snippet;
+    display?: Snippet;
+    pre?: Snippet;
+    usage?: Snippet;
+    snippets?: Record<string, string>;
+    componentDocs?: QComponentDocs | QComponentDocs[];
+    docName?: string;
+    docDescription?: string;
+  }
+
+  export const docsCtx = QContext<{ readonly snippets: Props["snippets"] }>(
+    "QDocs",
+  );
+</script>
+
 <script lang="ts">
-  import { setContext, type Snippet } from "svelte";
   import { QCard, QCardSection, QTheme, Quaff } from "../..";
-  import { QColors, QDocsCtxName, type QComponentDocs } from "../../utils";
+  import { QColors, type QComponentDocs } from "../../utils";
   import QApi from "./QApi.svelte";
+  import type { Snippet } from "svelte";
 
+  // #region:    --- Props
   let {
     children,
     display,
@@ -13,17 +33,16 @@
     componentDocs,
     docName,
     docDescription,
-  }: {
-    children?: Snippet;
-    display?: Snippet;
-    pre?: Snippet;
-    usage?: Snippet;
-    snippets?: Record<string, string>;
-    componentDocs?: QComponentDocs | QComponentDocs[];
-    docName?: string;
-    docDescription?: string;
-  } = $props();
+  }: Props = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Non-reactive variables
+  let principalDocument = Array.isArray(componentDocs)
+    ? componentDocs[0]
+    : componentDocs;
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Derived values
   const isDark = $derived(Quaff.darkMode.isActive);
 
   const hueRotate = $derived(
@@ -33,15 +52,16 @@
     ),
   );
 
-  if (snippets) {
-    setContext(QDocsCtxName.snippets, () => snippets);
-  }
-
-  let principalDocument = Array.isArray(componentDocs)
-    ? componentDocs[0]
-    : componentDocs;
-
   const brightness = $derived(Quaff.darkMode.isActive ? 0.7 : 1.2);
+  // #endregion: --- Derived values
+
+  // #region:    --- Context
+  docsCtx.set({
+    get snippets() {
+      return snippets;
+    },
+  });
+  // #endregion: --- Context
 </script>
 
 <div

package/dist/components/private/QDocs.svelte.d.ts

@@ -1,4 +1,34 @@
 import { SvelteComponentTyped } from "svelte";
+interface Props {
+    children?: Snippet;
+    display?: Snippet;
+    pre?: Snippet;
+    usage?: Snippet;
+    snippets?: Record<string, string>;
+    componentDocs?: QComponentDocs | QComponentDocs[];
+    docName?: string;
+    docDescription?: string;
+}
+export declare const docsCtx: {
+    readonly symbol: symbol;
+    get(): {
+        readonly snippets: Props["snippets"];
+    } | undefined;
+    assertGet(errorMsg?: string): {
+        readonly snippets: Props["snippets"];
+    };
+    set(context: {
+        readonly snippets: Props["snippets"];
+    }): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: "snippets", value: Record<string, string> | undefined): void;
+    updateEntries(updates: Partial<{
+        readonly snippets: Props["snippets"];
+    }>): void;
+};
+import { type QComponentDocs } from "../../utils";
+import type { Snippet } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/dist/components/private/QDocsSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
   import { QBtn, QCodeBlock, QDialog } from "../..";
-  import { QDocsCtxName } from "../../utils";
+  import { docsCtx } from "./QDocs.svelte";
+  import type { Snippet } from "svelte";
 
   type QDocsSectionProps = {
     title: string;
@@ -10,23 +10,27 @@
     noCode?: boolean;
   };
 
+  // #region:    --- Props
   let {
     title,
     noCode = false,
     sectionDescription,
     children,
   }: QDocsSectionProps = $props();
+  // #endregion: --- Props
 
-  const snippets = getContext<undefined | (() => Record<string, string>)>(
-    QDocsCtxName.snippets,
-  );
+  // #region:    --- Reactive variables
+  let dialog = $state(false);
 
-  const code = $derived(snippets && snippets()[title]);
+  const ctx = docsCtx.get();
+  // #endregion: --- Reactive variables
 
-  let dialog = $state(false);
+  // #region:    --- Derived values
+  const code = $derived(ctx?.snippets?.[title]);
 
   // Create a kebab-case id from the title to be able to link to this section
   const id = $derived(title.toLowerCase().replaceAll(" ", "-"));
+  // #endregion: --- Derived values
 </script>
 
 <div {id} style="margin-bottom:48px">

package/dist/components/progress/QCircularProgress.svelte

@@ -10,11 +10,7 @@
     rounded?: boolean;
   };
 
-  const radius = 50,
-    diameter = 2 * radius,
-    circumference = diameter * Math.PI,
-    strokeDashArray = Math.round(circumference * 1000) / 1000;
-
+  // #region:    --- Props
   let {
     value = $bindable(0),
     indeterminate = false,
@@ -33,7 +29,19 @@
     children = fallback,
     ...props
   }: QCircularProgressProps = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Non-reactive variables
+  const radius = 50;
+
+  const diameter = 2 * radius;
+
+  const circumference = diameter * Math.PI;
+
+  const strokeDashArray = Math.round(circumference * 1000) / 1000;
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Derived values
   const qSize = $derived(useSize(size, "q-circular-progress"));
 
   const parsedColor = $derived(
@@ -70,6 +78,7 @@
 
     return circumference * dashRatio + dashGap;
   });
+  // #endregion: --- Derived values
 </script>
 
 <div

package/dist/components/progress/QLinearProgress.svelte

@@ -2,12 +2,7 @@
   import { useSize } from "../../composables";
   import type { QLinearProgressProps } from "./props";
 
-  function width(val: number, reverse: boolean) {
-    return reverse
-      ? `translateX(100%) scale3d(-${val}, 1, 1)`
-      : `scale3d(${val}, 1, 1)`;
-  }
-
+  // #region:    --- Props
   let {
     value = $bindable(0),
     buffer,
@@ -21,7 +16,9 @@
     indeterminate = false,
     ...props
   }: QLinearProgressProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const normalized = $derived(value > 1 ? value / 100 : value);
   const normalizedBuffer = $derived(
     buffer && buffer > 1 ? buffer / 100 : buffer,
@@ -49,6 +46,15 @@
   const indicatorTransform = $derived(
     width(+indeterminate || normalized, reverse),
   );
+  // #endregion: --- Derived values
+
+  // #region:    --- Functions
+  function width(val: number, reverse: boolean) {
+    return reverse
+      ? `translateX(100%) scale3d(-${val}, 1, 1)`
+      : `scale3d(${val}, 1, 1)`;
+  }
+  // #endregion: --- Functions
 </script>
 
 <div

package/dist/components/radio/QRadio.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { QRadioProps } from "./props";
 
+  // #region:    --- Props
   let {
     value = "",
     label = "",
@@ -8,6 +9,7 @@
     disable = false,
     ...props
   }: QRadioProps = $props();
+  // #endregion: --- Props
 </script>
 
 <label

package/dist/components/railbar/QRailbar.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import { getContext, onDestroy, onMount, untrack } from "svelte";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QLayoutCtxName } from "../../utils";
-  import type { QLayoutProps } from "../layout/props";
-  import type { DrawerContext } from "../layout/QLayout.svelte";
+  import { onMount } from "svelte";
+  import { leftRailbarCtx, rightRailbarCtx } from "../layout/QLayout.svelte";
   import type { QRailbarProps } from "./props";
 
+  // #region:    --- Props
   let {
     width = 88,
     side = "left",
@@ -13,50 +11,53 @@
     children,
     ...props
   }: QRailbarProps = $props();
+  // #endregion: --- Props
 
-  const railbarCtx = QContext.get<DrawerContext>(QLayoutCtxName.railbar[side]);
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
-  );
-
+  // #region:    --- Non-reactive variables
   let railbarEl: HTMLElement;
+  // #endregion: --- Non-reactive variables
 
-  onMount(() => {
-    if (railbarCtx) {
-      setTimeout(() => {
-        railbarEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
-      }, 100);
-    }
-  });
-
-  onDestroy(() => {
-    untrack(() => railbarCtx)?.updateEntries({
-      width: 0,
-      takesSpace: false,
-      ready: false,
-    });
-  });
-
-  $effect.pre(() => {
-    untrack(() => railbarCtx)?.updateEntries({
-      width,
-      takesSpace: railbarEl?.style.display !== "none" || false,
-      ready: true,
-    });
-  });
+  // #region:    --- Derived values
+  const railbarCtxToUse = $derived(
+    side === "left" ? leftRailbarCtx : rightRailbarCtx,
+  );
+  const railbarCtx = $derived(railbarCtxToUse.get());
 
   const offsetTop = $derived.by(() => {
     const charPos = side === "left" ? 0 : 2;
-    return layoutView?.value.charAt(charPos) === "h";
+    return railbarCtx?.view.charAt(charPos) === "h";
   });
   const offsetBottom = $derived.by(() => {
     const charPos = side === "left" ? 8 : 10;
-    return layoutView?.value.charAt(charPos) === "f";
+    return railbarCtx?.view.charAt(charPos) === "f";
   });
 
   const railbarWidthStyle = $derived(`--${side}-railbar-width: ${width}px`);
 
   const style = $derived(`${railbarWidthStyle};${props.style ?? ""}`);
+  // #endregion: --- Derived values
+
+  // #region:    --- Lifecycle
+  onMount(() => {
+    railbarCtxToUse.updateEntries({
+      width,
+      takesSpace: railbarEl.style.display !== "none" || false,
+      ready: true,
+    });
+
+    setTimeout(() => {
+      railbarEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
+    }, 100);
+
+    return () => {
+      railbarCtxToUse.updateEntries({
+        width: 0,
+        takesSpace: false,
+        ready: false,
+      });
+    };
+  });
+  // #endregion: --- Lifecycle
 </script>
 
 <nav

package/dist/components/select/QSelect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount } from "svelte";
+  import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { QIcon } from "../..";
   import type { QEvent } from "../../utils";
@@ -7,6 +7,7 @@
 
   type QSelectEvent<T> = QEvent<T, HTMLDivElement>;
 
+  // #region:    --- Props
   let {
     options,
     multiple = false,
@@ -28,9 +29,19 @@
     value = $bindable(),
     ...props
   }: QSelectProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Reactive variables
   let focus = $state(false);
 
+  let wrapper: HTMLDivElement | null = $state(null);
+  let isMenuOpen = $state(false);
+  let wasClicked = $state(false);
+  let preventClose = $state(false);
+  let snippetPrependWidth = $state(0);
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Derived values
   const currentDisplayValue = $derived.by(() => {
     if (displayValue !== undefined) {
       return displayValue;
@@ -47,11 +58,26 @@
 
   const active = $derived(currentDisplayValue || focus);
 
-  let wrapper: HTMLDivElement | null = $state(null);
-  let isMenuOpen = $state(false);
-  let wasClicked = $state(false);
-  let preventClose = $state(false);
+  const selectedOptions: boolean[] = $derived(
+    options.map((option) => isSelected(option), value),
+  );
+  // #endregion: --- Derived values
 
+  // #region:    --- Lifecycle
+  onMount(() => {
+    if (browser) {
+      window.document.addEventListener("click", handleClickOutside);
+    }
+
+    return () => {
+      if (browser) {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    };
+  });
+  // #endregion: --- Lifecycle
+
+  // #region:    --- Functions
   function handleMousedown(e: QSelectEvent<MouseEvent>) {
     isMenuOpen = !isMenuOpen;
     wasClicked = true;
@@ -78,12 +104,6 @@
     props.onblur?.(e);
   }
 
-  const selectedOptions: boolean[] = $derived(
-    options.map((option) => isSelected(option), value),
-  );
-
-  let snippetPrependWidth = $state(0);
-
   function compareValues<T extends QSelectOption>(a: T, b: T) {
     return getOptionValue(a) === getOptionValue(b);
   }
@@ -139,18 +159,7 @@
       isMenuOpen = false;
     }
   }
-
-  onMount(() => {
-    if (browser) {
-      window.document.addEventListener("click", handleClickOutside);
-    }
-  });
-
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener("click", handleClickOutside);
-    }
-  });
+  // #endregion: --- Functions
 
   // q-field here, q-select in classes
 </script>

package/dist/components/separator/QSeparator.svelte

@@ -2,6 +2,7 @@
   import { useSize } from "../../composables";
   import type { QSeparatorProps } from "./props";
 
+  // #region:    --- Props
   let {
     spacing = "none",
     inset = false,
@@ -12,9 +13,12 @@
     textAlign = vertical ? "middle" : "center",
     ...props
   }: QSeparatorProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const orientation = $derived(vertical ? "vertical" : "horizontal");
   const qSize = $derived(useSize(spacing, "q-separator__spacing"));
+  // #endregion: --- Derived values
 </script>
 
 <div

package/dist/components/switch/QSwitch.svelte

@@ -6,6 +6,7 @@
 
   type QSwitchEvent<T> = QEvent<T, HTMLDivElement>;
 
+  // #region:    --- Props
   let {
     value = $bindable(),
     label = undefined,
@@ -17,10 +18,14 @@
     uncheckedIcon,
     ...props
   }: QSwitchProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   let qSwitch: HTMLDivElement;
   let qSwitchInput: HTMLInputElement;
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Functions
   function toggle() {
     value = !value;
 
@@ -53,6 +58,7 @@
     event.preventDefault();
     qSwitch.click();
   }
+  // #endregion: --- Functions
 </script>
 
 <div