@aleph-alpha/settings-kit 0.1.0 → 1.0.0

package/dist/shell/labels.d.ts

@@ -0,0 +1,25 @@
+/** Every piece of text the shell chrome renders itself. */
+export interface SkShellLabels {
+    /** Title beside the back control; also names the top bar. */
+    title: string;
+    /** Accessible name and tooltip of the back control. */
+    back: string;
+    /** Tooltip of the sidebar toggles. */
+    toggleSidebar: string;
+    /** Accessible name of the page navigation landmark. */
+    navigation: string;
+    /** Accessible name of the layout switch. */
+    layout: string;
+    /** The layout option without the content sidebar. */
+    focusLayout: string;
+    /** The layout option with the content sidebar. */
+    sidebarLayout: string;
+    /** Appended to a page link whose page has errors. */
+    pageHasErrors: string;
+}
+/**
+ * English text of the shell chrome, from the kit wording (`shell.*`).
+ * `SkShell` uses the wording of the current locale. Pass `labels` to replace any of it.
+ */
+export declare const defaultShellLabels: SkShellLabels;
+//# sourceMappingURL=labels.d.ts.map

package/dist/shell/labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../../src/shell/labels.ts"],"names":[],"mappings":"AAKA,2DAA2D;AAC3D,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,aAAa,EAAE,MAAM,CAAC;CACvB;AAID;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,aAShC,CAAC"}

package/dist/shell/location.d.ts

@@ -0,0 +1,18 @@
+/** Prefix the shell owns. Empty means the site root. */
+export declare function normalizeShellBase(base: string | undefined): string;
+/** Page path (`/appearance/branding`) joined onto `base`. */
+export declare function shellPath(base: string | undefined, pagePath: string): string;
+/**
+ * Page path under `base`, or `undefined` when `fullPath` is outside it.
+ * The base matches regardless of letter case, like vue-router's own base;
+ * the base itself (`/admin/settings` and `/admin/settings/`) is `/`.
+ */
+export declare function pagePath(base: string | undefined, fullPath: string): string | undefined;
+/** History locations are already relative to their own base. */
+export declare function historyPath(location: string): string;
+/** A location split into its pathname and the `?query#hash` after it. */
+export declare function splitLocation(location: string): {
+    path: string;
+    suffix: string;
+};
+//# sourceMappingURL=location.d.ts.map

package/dist/shell/location.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"location.d.ts","sourceRoot":"","sources":["../../src/shell/location.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAMnE;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAM5E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CASpB;AAED,gEAAgE;AAChE,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAQA"}

package/dist/shell/routes.d.ts

@@ -0,0 +1,19 @@
+import type { ResolvedLayout } from '../core/layout';
+/** One settings page as the shell routes it. */
+export interface ShellRoute {
+    /** Page id across the layout: `<category>/<page>`, segments encoded. */
+    id: string;
+    /** Path relative to the shell base: always `/<category>/<page>`. */
+    path: string;
+}
+/** One route per resolved page, in display order. */
+export declare function createShellRoutes(layout: ResolvedLayout): ShellRoute[];
+/**
+ * Route for a page path. Segments are compared decoded, without trailing
+ * slashes; an exact match wins over one that differs only in letter case,
+ * so `/Appearance/Branding/` opens `/appearance/branding`.
+ */
+export declare function findShellRoute(routes: readonly ShellRoute[], path: string): ShellRoute | undefined;
+/** Canonical form: no trailing slash, every segment decoded then re-encoded. */
+export declare function normalizeRoutePath(path: string): string;
+//# sourceMappingURL=routes.d.ts.map

package/dist/shell/routes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../src/shell/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,gDAAgD;AAChD,MAAM,WAAW,UAAU;IACzB,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qDAAqD;AACrD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,EAAE,CAEtE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,SAAS,UAAU,EAAE,EAC7B,IAAI,EAAE,MAAM,GACX,UAAU,GAAG,SAAS,CAUxB;AAED,gFAAgF;AAChF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMvD"}

package/dist/shell/useMediaQuery.d.ts

@@ -0,0 +1,4 @@
+import { type Ref } from 'vue';
+/** Whether `query` matches; `false` where `matchMedia` is unavailable (SSR, JSDOM). */
+export declare function useMediaQuery(query: string): Ref<boolean>;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/shell/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/shell/useMediaQuery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAErD,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,CAWzD"}

package/dist/shell/useShellLocation.d.ts

@@ -0,0 +1,37 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import { type ShellRoute } from './routes';
+/** Options for `useShellLocation`. */
+export interface UseShellLocationOptions {
+    /** Pages the shell can show, in display order. */
+    routes: MaybeRefOrGetter<readonly ShellRoute[]>;
+    /** URL prefix of the settings pages, e.g. `/admin/settings`. */
+    base?: MaybeRefOrGetter<string | undefined>;
+}
+/** What `useShellLocation` returns. */
+export interface ShellLocation {
+    /** Id of the page on screen; the first page when the URL names none. */
+    activeId: ComputedRef<string | undefined>;
+    /** Opens a page by id and pushes its URL where the shell may. */
+    openPage: (id: string | undefined) => void;
+    /** `href` for a page link, ready for `<a>`. */
+    hrefOf: (id: string) => string;
+}
+/**
+ * Active settings page for one shell, synced with the URL through exactly
+ * one source. Nothing is registered on the app:
+ *
+ * 1. An injected history (`skShellHistoryKey`), e.g. a memory history.
+ * 2. The host router, when one is installed. The shell navigates only to
+ *    targets that still match the route record that rendered it, and leaves
+ *    the URL alone once the host has navigated elsewhere (or a `KeepAlive`
+ *    has deactivated it). An unknown page path is redirected only under an
+ *    explicit `base`.
+ * 3. Otherwise a private `createWebHistory(base)`, destroyed on unmount and
+ *    recreated when `base` changes. It never writes a URL outside `base`.
+ *
+ * A failed or blocked navigation re-reads the real location, so the shell
+ * always shows the page the URL names. Query and hash survive a canonical
+ * rewrite. Without `window` (SSR) the first page renders and no URL is read.
+ */
+export declare function useShellLocation(options: UseShellLocationOptions): ShellLocation;
+//# sourceMappingURL=useShellLocation.d.ts.map

package/dist/shell/useShellLocation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShellLocation.d.ts","sourceRoot":"","sources":["../../src/shell/useShellLocation.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,MAAM,KAAK,CAAC;AAiBb,OAAO,EAAsC,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/E,sCAAsC;AACtC,MAAM,WAAW,uBAAuB;IACtC,kDAAkD;IAClD,MAAM,EAAE,gBAAgB,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC;IAChD,gEAAgE;IAChE,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CAC7C;AAED,uCAAuC;AACvC,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,QAAQ,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC1C,iEAAiE;IACjE,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3C,+CAA+C;IAC/C,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,uBAAuB,GAC/B,aAAa,CAyOf"}

package/package.json

@@ -1,24 +1,33 @@
 {
   "name": "@aleph-alpha/settings-kit",
-  "version": "0.1.0",
-  "description": "Settings kit package delivering setting units and generators for Vue applications",
+  "version": "1.0.0",
+  "description": "Turns a settings schema and layout into accessible admin screens for Vue applications",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./components": {
-      "import": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
     },
     "./generators": {
-      "import": "./dist/generators/index.js",
-      "types": "./dist/generators/index.d.ts"
-    }
+      "types": "./dist/generators/index.d.ts",
+      "import": "./dist/generators/index.js"
+    },
+    "./units": {
+      "types": "./dist/generators/index.d.ts",
+      "import": "./dist/generators/index.js"
+    },
+    "./shell": {
+      "types": "./dist/shell/index.d.ts",
+      "import": "./dist/shell/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"
@@ -43,13 +52,21 @@
     "directory": "packages/settings-kit"
   },
   "peerDependencies": {
-    "@aleph-alpha/ui-library": "^6.1.0",
-    "vue": "^3.5.27"
+    "@aleph-alpha/ui-library": "^7.0.1",
+    "vue": "^3.5.27",
+    "vue-router": "^4.1.0"
   },
-  "dependencies": {
-    "@aleph-alpha/ui-library": "^6.1.0"
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@aleph-alpha/ui-library": "^7.0.1",
+    "concurrently": "9.2.1",
+    "http-server": "14.1.1",
+    "jsdom": "^25.0.1",
+    "storybook": "10.2.17",
     "@storybook/addon-a11y": "10.2.17",
     "@storybook/addon-docs": "10.2.17",
     "@storybook/addon-themes": "10.2.17",
@@ -58,30 +75,32 @@
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "8.1.0",
     "@types/node": "^25.1.0",
-    "@unocss/preset-wind4": "^66.6.2",
-    "@unocss/reset": "^66.6.2",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "concurrently": "9.2.1",
-    "http-server": "14.1.1",
-    "jsdom": "^25.0.1",
-    "storybook": "10.2.17",
     "typescript": "^5.9.3",
     "unocss": "^66.6.2",
     "unocss-preset-animations": "^1.3.0",
     "unocss-preset-shadcn": "^1.0.1",
+    "@unocss/preset-wind4": "^66.6.2",
+    "@unocss/reset": "^66.6.2",
     "vite": "^7.3.2",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "@vitejs/plugin-vue": "^6.0.3",
     "vitest": "3.2.6",
     "vue": "^3.5.27",
+    "vue-router": "4.6.4",
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
     "@aleph-alpha/eslint-config-frontend": "0.7.1",
-    "@aleph-alpha/tsconfig-frontend": "0.7.3",
-    "@aleph-alpha/prettier-config-frontend": "2.1.1"
+    "@aleph-alpha/prettier-config-frontend": "2.1.1",
+    "@aleph-alpha/storybook-addon-filters": "0.0.1",
+    "@aleph-alpha/storybook-addon-sidebar": "0.0.1",
+    "@aleph-alpha/storybook-addon-theming": "0.0.1",
+    "@aleph-alpha/tsconfig-frontend": "0.7.3"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",
     "dev": "vite build --watch",
+    "playground": "vite playground",
+    "showcase": "vite showcase",
+    "build:showcase": "vite build showcase",
     "typecheck": "vue-tsc --noEmit",
     "test": "vitest run",
     "format": "prettier --write .",

package/dist/SettingToggleUnit.vue_vue_type_script_setup_true_lang-BM7-6aXj.js

@@ -1,61 +0,0 @@
-import { defineComponent, useModel, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, createVNode, unref, mergeModels } from "vue";
-import { UiSwitch } from "@aleph-alpha/ui-library";
-const _hoisted_1 = { class: "flex items-center justify-between gap-4 py-2" };
-const _hoisted_2 = { class: "flex flex-col gap-1" };
-const _hoisted_3 = ["for"];
-const _hoisted_4 = ["id"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "SettingToggleUnit"
-  },
-  __name: "SettingToggleUnit",
-  props: /* @__PURE__ */ mergeModels({
-    unit: {},
-    disabled: { type: Boolean, default: false }
-  }, {
-    "modelValue": { type: Boolean, ...{
-      default: void 0
-    } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const value = computed({
-      get: () => model.value ?? props.unit.defaultValue,
-      set: (next) => {
-        model.value = next;
-      }
-    });
-    const descriptionId = computed(
-      () => props.unit.description ? `${props.unit.id}-description` : void 0
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("label", {
-            for: __props.unit.id,
-            class: "text-sm font-medium"
-          }, toDisplayString(__props.unit.label), 9, _hoisted_3),
-          __props.unit.description ? (openBlock(), createElementBlock("span", {
-            key: 0,
-            id: descriptionId.value,
-            class: "text-xs text-content-on-surface-secondary"
-          }, toDisplayString(__props.unit.description), 9, _hoisted_4)) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(UiSwitch), {
-          id: __props.unit.id,
-          modelValue: value.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
-          name: __props.unit.id,
-          disabled: __props.disabled,
-          "aria-describedby": descriptionId.value
-        }, null, 8, ["id", "modelValue", "name", "disabled", "aria-describedby"])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/components/SettingToggleUnit/SettingToggleUnit.vue.d.ts

@@ -1,16 +0,0 @@
-import type { SettingToggleUnitProps } from './types';
-type __VLS_Props = SettingToggleUnitProps;
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    disabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-//# sourceMappingURL=SettingToggleUnit.vue.d.ts.map

package/dist/components/SettingToggleUnit/SettingToggleUnit.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingToggleUnit.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SettingToggleUnit/SettingToggleUnit.vue"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAMtD,KAAK,WAAW,GAAG,sBAAsB,CAAC;AAwB1C,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAQF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAwExD,QAAA,MAAM,YAAY;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/SettingToggleUnit/index.d.ts

@@ -1,3 +0,0 @@
-export { default as SettingToggleUnit } from './SettingToggleUnit.vue';
-export type * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/SettingToggleUnit/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SettingToggleUnit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,mBAAmB,SAAS,CAAC"}

package/dist/components/SettingToggleUnit/types.d.ts

@@ -1,11 +0,0 @@
-import type { ToggleSettingUnit } from '../../types';
-export interface SettingToggleUnitProps {
-    /** The toggle setting unit to render (id, label, description, default). */
-    unit: ToggleSettingUnit;
-    /**
-     * Disables the switch, blocking all user interaction.
-     * @default false
-     */
-    disabled?: boolean;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/SettingToggleUnit/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SettingToggleUnit/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,IAAI,EAAE,iBAAiB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}