npm - @viniaraujo68/plinth - Versions diffs - 0.0.0-stage → 0.3.0 - Mend

@viniaraujo68/plinth 0.0.0-stage → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/LICENSE +21 -0
package/README.md +361 -2
package/dist/anchoring.d.ts +61 -0
package/dist/anchoring.js +151 -0
package/dist/async-action.svelte.d.ts +37 -0
package/dist/async-action.svelte.js +64 -0
package/dist/attachments/index.d.ts +2 -0
package/dist/attachments/index.js +2 -0
package/dist/attachments/sortable.d.ts +6 -0
package/dist/attachments/sortable.js +227 -0
package/dist/attachments/tooltip.d.ts +37 -0
package/dist/attachments/tooltip.js +166 -0
package/dist/components/AsyncButton.svelte +49 -0
package/dist/components/AsyncButton.svelte.d.ts +32 -0
package/dist/components/Combobox.svelte +380 -0
package/dist/components/Combobox.svelte.d.ts +74 -0
package/dist/components/Copyable.svelte +116 -0
package/dist/components/Copyable.svelte.d.ts +37 -0
package/dist/components/DateRangePicker.svelte +266 -0
package/dist/components/DateRangePicker.svelte.d.ts +66 -0
package/dist/components/Dialog.svelte +102 -0
package/dist/components/Dialog.svelte.d.ts +38 -0
package/dist/components/DragHandle.svelte +26 -0
package/dist/components/DragHandle.svelte.d.ts +7 -0
package/dist/components/Dropdown.svelte +204 -0
package/dist/components/Dropdown.svelte.d.ts +49 -0
package/dist/components/ErrorDisplay.svelte +59 -0
package/dist/components/ErrorDisplay.svelte.d.ts +24 -0
package/dist/components/ErrorPage.svelte +119 -0
package/dist/components/ErrorPage.svelte.d.ts +52 -0
package/dist/components/JsonInput.svelte +106 -0
package/dist/components/JsonInput.svelte.d.ts +40 -0
package/dist/components/Listbox.svelte +257 -0
package/dist/components/Listbox.svelte.d.ts +78 -0
package/dist/components/LoadingButton.svelte +36 -0
package/dist/components/LoadingButton.svelte.d.ts +22 -0
package/dist/components/Logo.svelte +112 -0
package/dist/components/Logo.svelte.d.ts +29 -0
package/dist/components/Modal.svelte +187 -0
package/dist/components/Modal.svelte.d.ts +62 -0
package/dist/components/MultiSelect.svelte +256 -0
package/dist/components/MultiSelect.svelte.d.ts +89 -0
package/dist/components/OptionPanel.svelte +241 -0
package/dist/components/OptionPanel.svelte.d.ts +51 -0
package/dist/components/Paginator.svelte +205 -0
package/dist/components/Paginator.svelte.d.ts +48 -0
package/dist/components/RefreshButton.svelte +246 -0
package/dist/components/RefreshButton.svelte.d.ts +46 -0
package/dist/components/SegmentedControl.svelte +147 -0
package/dist/components/SegmentedControl.svelte.d.ts +71 -0
package/dist/components/Select.svelte +312 -0
package/dist/components/Select.svelte.d.ts +68 -0
package/dist/components/Skeleton.svelte +97 -0
package/dist/components/Skeleton.svelte.d.ts +32 -0
package/dist/components/Tooltip.svelte +60 -0
package/dist/components/Tooltip.svelte.d.ts +58 -0
package/dist/components/date-range.d.ts +101 -0
package/dist/components/date-range.js +144 -0
package/dist/components/index.d.ts +26 -0
package/dist/components/index.js +38 -0
package/dist/components/json-text.d.ts +22 -0
package/dist/components/json-text.js +22 -0
package/dist/components/pick.d.ts +18 -0
package/dist/components/pick.js +18 -0
package/dist/components/segmented.d.ts +7 -0
package/dist/components/segmented.js +1 -0
package/dist/components/select.d.ts +66 -0
package/dist/components/select.js +90 -0
package/dist/confirm/Confirmer.svelte +194 -0
package/dist/confirm/Confirmer.svelte.d.ts +45 -0
package/dist/confirm/challenge.d.ts +16 -0
package/dist/confirm/challenge.js +16 -0
package/dist/confirm/confirm-manager.svelte.d.ts +91 -0
package/dist/confirm/confirm-manager.svelte.js +149 -0
package/dist/confirm/index.d.ts +3 -0
package/dist/confirm/index.js +3 -0
package/dist/error.d.ts +25 -0
package/dist/error.js +39 -0
package/dist/formatters.d.ts +95 -0
package/dist/formatters.js +146 -0
package/dist/http.d.ts +68 -0
package/dist/http.js +138 -0
package/dist/index.d.ts +10 -0
package/dist/index.js +14 -0
package/dist/routing.svelte.d.ts +169 -0
package/dist/routing.svelte.js +208 -0
package/dist/shell/AppShell.svelte +874 -0
package/dist/shell/AppShell.svelte.d.ts +93 -0
package/dist/shell/Breadcrumbs.svelte +78 -0
package/dist/shell/Breadcrumbs.svelte.d.ts +25 -0
package/dist/shell/crumbs.d.ts +23 -0
package/dist/shell/crumbs.js +1 -0
package/dist/shell/index.d.ts +3 -0
package/dist/shell/index.js +6 -0
package/dist/table/ColumnMenu.svelte +249 -0
package/dist/table/ColumnMenu.svelte.d.ts +47 -0
package/dist/table/DataTable.svelte +643 -0
package/dist/table/DataTable.svelte.d.ts +153 -0
package/dist/table/columns.d.ts +55 -0
package/dist/table/columns.js +153 -0
package/dist/table/index.d.ts +4 -0
package/dist/table/index.js +8 -0
package/dist/table/sort.d.ts +48 -0
package/dist/table/sort.js +139 -0
package/dist/table/types.d.ts +93 -0
package/dist/table/types.js +1 -0
package/dist/theme/ThemeController.svelte +54 -0
package/dist/theme/ThemeController.svelte.d.ts +27 -0
package/dist/theme/ThemeToggle.svelte +119 -0
package/dist/theme/ThemeToggle.svelte.d.ts +52 -0
package/dist/theme/css-color.d.ts +23 -0
package/dist/theme/css-color.js +31 -0
package/dist/theme/index.d.ts +4 -0
package/dist/theme/index.js +5 -0
package/dist/theme/theme.css +410 -0
package/dist/theme/theme.svelte.d.ts +54 -0
package/dist/theme/theme.svelte.js +58 -0
package/dist/toast/Toaster.svelte +257 -0
package/dist/toast/Toaster.svelte.d.ts +35 -0
package/dist/toast/index.d.ts +2 -0
package/dist/toast/index.js +2 -0
package/dist/toast/toast-manager.svelte.d.ts +99 -0
package/dist/toast/toast-manager.svelte.js +176 -0
package/dist/user/ScopedComponent.svelte +47 -0
package/dist/user/ScopedComponent.svelte.d.ts +29 -0
package/dist/user/anonymous.d.ts +21 -0
package/dist/user/anonymous.js +26 -0
package/dist/user/context.d.ts +55 -0
package/dist/user/context.js +13 -0
package/dist/user/index.d.ts +3 -0
package/dist/user/index.js +6 -0
package/package.json +133 -4

package/dist/theme/ThemeController.svelte ADDED Viewed

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { DARK_THEME, getThemeContext, LIGHT_THEME, themeCookie } from "./theme.svelte.js";
+  const theme = getThemeContext();
+  // A consumer that stamps `data-theme` on <html> before hydration is seeding the FIRST PAINT
+  // from a cookie no checkbox has read yet. CSS already makes a checked controller outrank that
+  // seed, but "system" checks nothing, so a stale seed would go on painting a theme the user has
+  // just left. Releasing it once, on mount, hands the root over to this checkbox for good; the
+  // effect reads nothing reactive, so it runs exactly once.
+  $effect(() => {
+    const root = document.documentElement;
+    const seed = root.getAttribute("data-theme");
+    if (seed === LIGHT_THEME || seed === DARK_THEME) root.removeAttribute("data-theme");
+  });
+  $effect(() => {
+    document.cookie = themeCookie(theme.preference);
+  });
+</script>
+<!--
+@component
+The daisyUI theme-controller checkbox, plus persistence of whatever it is holding.
+The checkbox encodes the PREFERENCE, not the resolved theme: unchecked means "system", which the
+stylesheet answers with `color-scheme: light dark` so the OS decides at first paint with no JS
+involved; checked pins the theme named by `value`. All three states are therefore fully
+determined by the cookie, which is what makes a server-rendered first paint flash-free.
+A `data-theme` stamped on <html> before hydration — the head-script trick a client-rendered app
+uses to avoid a flash — is a seed for that first paint and nothing more. This checkbox outranks
+it as soon as it is checked, and drops the seed altogether on mount, so from then on the
+preference is the only thing painting the page. A `data-theme` on any element BELOW the root is
+untouched by all of this and keeps re-theming its own subtree.
+Mount it exactly once and unconditionally, near the app root — unmounting it drops the app back
+to "system". Nothing else in an app should carry the `theme-controller` class; a picker elsewhere
+writes `preference` on the theme context and lets this component follow.
+```svelte
+setThemeContext(new ThemeContext(readThemePreference()));
+...
+<ThemeController />
+```
+-->
+<input
+  type="checkbox"
+  class="theme-controller"
+  value={theme.preference === "light" ? LIGHT_THEME : DARK_THEME}
+  hidden
+  checked={theme.preference !== "system"}
+/>

package/dist/theme/ThemeController.svelte.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * The daisyUI theme-controller checkbox, plus persistence of whatever it is holding.
+ *
+ * The checkbox encodes the PREFERENCE, not the resolved theme: unchecked means "system", which the
+ * stylesheet answers with `color-scheme: light dark` so the OS decides at first paint with no JS
+ * involved; checked pins the theme named by `value`. All three states are therefore fully
+ * determined by the cookie, which is what makes a server-rendered first paint flash-free.
+ *
+ * A `data-theme` stamped on <html> before hydration — the head-script trick a client-rendered app
+ * uses to avoid a flash — is a seed for that first paint and nothing more. This checkbox outranks
+ * it as soon as it is checked, and drops the seed altogether on mount, so from then on the
+ * preference is the only thing painting the page. A `data-theme` on any element BELOW the root is
+ * untouched by all of this and keeps re-theming its own subtree.
+ *
+ * Mount it exactly once and unconditionally, near the app root — unmounting it drops the app back
+ * to "system". Nothing else in an app should carry the `theme-controller` class; a picker elsewhere
+ * writes `preference` on the theme context and lets this component follow.
+ *
+ * ```svelte
+ * setThemeContext(new ThemeContext(readThemePreference()));
+ * ...
+ * <ThemeController />
+ * ```
+ */
+declare const ThemeController: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeController = ReturnType<typeof ThemeController>;
+export default ThemeController;

package/dist/theme/ThemeToggle.svelte ADDED Viewed

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { getThemeContext, type ThemePreference } from "./theme.svelte.js";
+  // Cycling through "system" rather than flipping between the two explicit themes is the point:
+  // "follow the OS" is a real choice a user can get back to, and a two-state toggle strands it.
+  const NEXT: Record<ThemePreference, ThemePreference> = {
+    system: "light",
+    light: "dark",
+    dark: "system",
+  };
+  const LABELS: Record<ThemePreference, string> = {
+    system: "System",
+    light: "Light",
+    dark: "Dark",
+  };
+  interface Props {
+    /** Extra classes for the button, so a caller can size or place it. */
+    class?: string;
+    /** Hide the written preference and keep only the icon. The accessible name is unaffected. */
+    iconOnly?: boolean;
+    /**
+     * Names one preference — the visible text, and the words the default accessible name is built
+     * from. A function of the preference, and not three strings, because it is the same wording in
+     * both places; overriding it localizes both at once.
+     */
+    preferenceLabel?: (preference: ThemePreference) => string;
+    /**
+     * Accessible name of the button, given the preference on screen and the one a click moves to.
+     * Defaults to the English sentence around `preferenceLabel`, so a caller who only needs the
+     * three words translated can leave this alone; supply it to phrase the whole sentence.
+     */
+    label?: (current: ThemePreference, next: ThemePreference) => string;
+  }
+  const {
+    class: className = "",
+    iconOnly = false,
+    preferenceLabel = (preference: ThemePreference) => LABELS[preference],
+    label,
+  }: Props = $props();
+  const theme = getThemeContext();
+  const next = $derived(NEXT[theme.preference]);
+  const accessibleName = $derived(
+    label?.(theme.preference, next) ??
+      `Theme: ${preferenceLabel(theme.preference)}. Switch to ${preferenceLabel(next)}.`,
+  );
+</script>
+<!--
+@component
+A visible control cycling the theme preference System → Light → Dark → System.
+It only writes `preference` on the theme context; the actual repaint is done by the
+`ThemeController` checkbox, which has to be mounted once near the app root. That split is what
+lets an app place any number of pickers wherever it likes without ever duplicating the
+`theme-controller` element, whose presence is what CSS keys on.
+The wording is English by default and both halves of it are props, because the library ships no
+translations. `preferenceLabel` names a single preference — the visible text and the words inside
+the accessible name — and is usually the only one an app needs. `label` replaces the sentence those
+words sit in, for a language the "Theme: X. Switch to Y." shape does not fit.
+```svelte
+<script lang="ts">
+  import { ThemeToggle, type ThemePreference } from "@viniaraujo68/plinth/theme";
+  const PREFERENCES: Record<ThemePreference, string> = {
+    system: "Sistema",
+    light: "Claro",
+    dark: "Escuro",
+  };
+</script>
+<ThemeToggle
+  preferenceLabel={(preference) => PREFERENCES[preference]}
+  label={(current, next) => `Tema: ${PREFERENCES[current]}. Mudar para ${PREFERENCES[next]}.`}
+/>
+```
+-->
+<button
+  type="button"
+  class="btn gap-2 btn-ghost btn-sm {className}"
+  aria-label={accessibleName}
+  data-preference={theme.preference}
+  onclick={() => (theme.preference = next)}
+>
+  <!-- aria-hidden because the button already carries the whole meaning in its accessible name. -->
+  <svg
+    class="size-4"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    {#if theme.preference === "light"}
+      <circle cx="12" cy="12" r="4" />
+      <path
+        d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+      />
+    {:else if theme.preference === "dark"}
+      <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+    {:else}
+      <rect x="2" y="4" width="20" height="13" rx="2" />
+      <path d="M8 21h8M12 17v4" />
+    {/if}
+  </svg>
+  {#if !iconOnly}
+    <span aria-hidden="true">{preferenceLabel(theme.preference)}</span>
+  {/if}
+</button>

package/dist/theme/ThemeToggle.svelte.d.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import { type ThemePreference } from "./theme.svelte.js";
+interface Props {
+    /** Extra classes for the button, so a caller can size or place it. */
+    class?: string;
+    /** Hide the written preference and keep only the icon. The accessible name is unaffected. */
+    iconOnly?: boolean;
+    /**
+     * Names one preference — the visible text, and the words the default accessible name is built
+     * from. A function of the preference, and not three strings, because it is the same wording in
+     * both places; overriding it localizes both at once.
+     */
+    preferenceLabel?: (preference: ThemePreference) => string;
+    /**
+     * Accessible name of the button, given the preference on screen and the one a click moves to.
+     * Defaults to the English sentence around `preferenceLabel`, so a caller who only needs the
+     * three words translated can leave this alone; supply it to phrase the whole sentence.
+     */
+    label?: (current: ThemePreference, next: ThemePreference) => string;
+}
+/**
+ * A visible control cycling the theme preference System → Light → Dark → System.
+ *
+ * It only writes `preference` on the theme context; the actual repaint is done by the
+ * `ThemeController` checkbox, which has to be mounted once near the app root. That split is what
+ * lets an app place any number of pickers wherever it likes without ever duplicating the
+ * `theme-controller` element, whose presence is what CSS keys on.
+ *
+ * The wording is English by default and both halves of it are props, because the library ships no
+ * translations. `preferenceLabel` names a single preference — the visible text and the words inside
+ * the accessible name — and is usually the only one an app needs. `label` replaces the sentence those
+ * words sit in, for a language the "Theme: X. Switch to Y." shape does not fit.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * import { ThemeToggle, type ThemePreference } from "@viniaraujo68/plinth/theme";
+ *
+ * const PREFERENCES: Record<ThemePreference, string> = {
+ *   system: "Sistema",
+ *   light: "Claro",
+ *   dark: "Escuro",
+ * };
+ * </script>
+ *
+ * <ThemeToggle
+ * preferenceLabel={(preference) => PREFERENCES[preference]}
+ * label={(current, next) => `Tema: ${PREFERENCES[current]}. Mudar para ${PREFERENCES[next]}.`}
+ * />
+ * ```
+ */
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/theme/css-color.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * Resolves CSS colour expressions — `var(--color-primary)`, a `color-mix()` over theme tokens —
+ * into the concrete colour strings a canvas needs. A chart library draws on a `<canvas>`, which
+ * knows nothing of custom properties, so a chart that follows the theme has to ask the page what
+ * its tokens currently compute to, in the right place in the tree.
+ */
+export interface CssColorReader {
+    /**
+     * The computed colour of `expression` inside the host, as `rgb(...)` or whatever the browser
+     * serialises it to. `fallback` answers for an expression the browser rejects — a typo, or a
+     * colour function it does not support yet.
+     */
+    read: (expression: string, fallback: string) => string;
+    /** Removes the probe element. Reads after this answer the fallback. */
+    dispose: () => void;
+}
+/**
+ * One hidden probe element, appended inside `host` so custom properties resolve against the host's
+ * own cascade — a theme scoped to a subtree, a palette declared on the chart's wrapper — rather
+ * than against the document root. The probe is reused for every read, since each one costs a style
+ * recalculation and a chart reads a dozen colours per render.
+ */
+export declare const createCssColorReader: (host: HTMLElement) => CssColorReader;

package/dist/theme/css-color.js ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * One hidden probe element, appended inside `host` so custom properties resolve against the host's
+ * own cascade — a theme scoped to a subtree, a palette declared on the chart's wrapper — rather
+ * than against the document root. The probe is reused for every read, since each one costs a style
+ * recalculation and a chart reads a dozen colours per render.
+ */
+export const createCssColorReader = (host) => {
+    const probe = document.createElement("span");
+    probe.style.position = "absolute";
+    probe.style.visibility = "hidden";
+    probe.style.pointerEvents = "none";
+    host.appendChild(probe);
+    let disposed = false;
+    return {
+        read(expression, fallback) {
+            if (disposed)
+                return fallback;
+            probe.style.color = "";
+            probe.style.color = expression;
+            // An expression the browser cannot parse leaves the declaration empty, and the computed
+            // colour would then be whatever the probe inherits — a colour, just not the one asked for.
+            if (probe.style.color === "")
+                return fallback;
+            return getComputedStyle(probe).color || fallback;
+        },
+        dispose() {
+            disposed = true;
+            probe.remove();
+        },
+    };
+};

package/dist/theme/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { DARK_THEME, getThemeContext, LIGHT_THEME, parseThemePreference, readThemePreference, setThemeContext, THEME_COOKIE, ThemeContext, themeCookie, type ThemePreference, } from "./theme.svelte.js";
+export { default as ThemeController } from "./ThemeController.svelte";
+export { default as ThemeToggle } from "./ThemeToggle.svelte";
+export { createCssColorReader, type CssColorReader } from "./css-color.js";

package/dist/theme/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export { DARK_THEME, getThemeContext, LIGHT_THEME, parseThemePreference, readThemePreference, setThemeContext, THEME_COOKIE, ThemeContext, themeCookie, } from "./theme.svelte.js";
+export { default as ThemeController } from "./ThemeController.svelte";
+export { default as ThemeToggle } from "./ThemeToggle.svelte";
+// Theme tokens resolved to concrete colours, for the one surface CSS cannot reach: a canvas.
+export { createCssColorReader } from "./css-color.js";