@privateaim/client-vue-theme 0.11.0

package/LICENSE

@@ -0,0 +1,202 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2024 PrivateAIM
+   Copyright 2020 - 2023 Peter Placzek
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import clientWebKitTheme, { merge } from "@authup/client-web-kit-theme";
+
+//#region src/index.d.ts
+/**
+ * App-level theme. Layers PrivateAIM app-specific concerns (Bootstrap-compat
+ * class shims, heading scale, brand tokens) on top of the kit theme.
+ *
+ * Consumers register both themes — order matters: the kit-level theme
+ * first so its element class strings are the baseline, then the app
+ * theme so its overrides win:
+ *
+ *     import clientWebKitTheme from '@authup/client-web-kit-theme';
+ *     import clientVueTheme from '@privateaim/client-vue-theme';
+ *
+ *     app.use(vuecs, {
+ *         themes: [clientWebKitTheme(), clientVueTheme()],
+ *     });
+ *
+ * Reskinning (palette swap, dark mode) is handled by redefining
+ * `--vc-color-*` variables — `setColorPalette()` from
+ * `@vuecs/theme-tailwind` or toggling `.dark` on `<html>` works without
+ * any theme configuration here.
+ */
+declare function clientVueTheme(): import("@vuecs/core").Theme;
+//#endregion
+export { clientWebKitTheme, clientVueTheme as default, merge };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;AASmF;;;;AAsB7C;;;;;;;;;;;;;;iBAAd,cAAA,0BAAc,KAAA"}

package/dist/index.mjs

@@ -0,0 +1,33 @@
+import { defineTheme, extend } from "@vuecs/core";
+import clientWebKitTheme, { merge } from "@authup/client-web-kit-theme";
+//#region src/index.ts
+/**
+* App-level theme. Layers PrivateAIM app-specific concerns (Bootstrap-compat
+* class shims, heading scale, brand tokens) on top of the kit theme.
+*
+* Consumers register both themes — order matters: the kit-level theme
+* first so its element class strings are the baseline, then the app
+* theme so its overrides win:
+*
+*     import clientWebKitTheme from '@authup/client-web-kit-theme';
+*     import clientVueTheme from '@privateaim/client-vue-theme';
+*
+*     app.use(vuecs, {
+*         themes: [clientWebKitTheme(), clientVueTheme()],
+*     });
+*
+* Reskinning (palette swap, dark mode) is handled by redefining
+* `--vc-color-*` variables — `setColorPalette()` from
+* `@vuecs/theme-tailwind` or toggling `.dark` on `<html>` works without
+* any theme configuration here.
+*/
+function clientVueTheme() {
+	return defineTheme({ elements: {
+		tableHeadCell: { classes: { root: "px-3 font-medium" } },
+		pagination: { classes: { link: extend("enabled:hover:bg-primary-600! enabled:hover:text-on-primary! enabled:hover:border-primary-600! enabled:focus-visible:bg-primary-600! enabled:focus-visible:text-on-primary! enabled:focus-visible:border-primary-600!") } }
+	} });
+}
+//#endregion
+export { clientWebKitTheme, clientVueTheme as default, merge };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["/*\n * Copyright (c) 2024-2026.\n * Author Peter Placzek (tada5hi)\n * For the full copyright and license information,\n * view the LICENSE file that was distributed with this source code.\n */\n\nimport { defineTheme, extend } from '@vuecs/core';\n\nexport { default as clientWebKitTheme, merge } from '@authup/client-web-kit-theme';\n\n/**\n * App-level theme. Layers PrivateAIM app-specific concerns (Bootstrap-compat\n * class shims, heading scale, brand tokens) on top of the kit theme.\n *\n * Consumers register both themes — order matters: the kit-level theme\n * first so its element class strings are the baseline, then the app\n * theme so its overrides win:\n *\n *     import clientWebKitTheme from '@authup/client-web-kit-theme';\n *     import clientVueTheme from '@privateaim/client-vue-theme';\n *\n *     app.use(vuecs, {\n *         themes: [clientWebKitTheme(), clientVueTheme()],\n *     });\n *\n * Reskinning (palette swap, dark mode) is handled by redefining\n * `--vc-color-*` variables — `setColorPalette()` from\n * `@vuecs/theme-tailwind` or toggling `.dark` on `<html>` works without\n * any theme configuration here.\n */\nexport default function clientVueTheme() {\n    return defineTheme({\n        elements: {\n            tableHeadCell: { classes: { root: 'px-3 font-medium' } },\n            /*\n             * Hovering / focusing a page button previews the active-page\n             * paint (\"click → this page\"). `extend()` appends to the\n             * theme-tailwind base `link` classes; the `!` suffix wins over\n             * per-variant hover utilities the same way the stock\n             * `linkActive` classes do. `enabled:` keeps disabled\n             * first/prev/next/last buttons unpainted.\n             */\n            pagination: {\n                classes: {\n                    link: extend(\n                        'enabled:hover:bg-primary-600! enabled:hover:text-on-primary! enabled:hover:border-primary-600! ' +\n                        'enabled:focus-visible:bg-primary-600! enabled:focus-visible:text-on-primary! enabled:focus-visible:border-primary-600!',\n                    ),\n                },\n            },\n        },\n    });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAwB,iBAAiB;CACrC,OAAO,YAAY,EACf,UAAU;EACN,eAAe,EAAE,SAAS,EAAE,MAAM,mBAAmB,EAAE;EASvD,YAAY,EACR,SAAS,EACL,MAAM,OACF,uNAEJ,EACJ,EACJ;CACJ,EACJ,CAAC;AACL"}

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@privateaim/client-vue-theme",
+    "type": "module",
+    "version": "0.11.0",
+    "description": "PrivateAIM theme for vuecs components, built on top of @vuecs/theme-tailwind.",
+    "license": "Apache-2.0",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/index.d.mts",
+            "style": "./src/index.css",
+            "import": "./dist/index.mjs"
+        },
+        "./index.css": "./src/index.css",
+        "./src/index.css": "./src/index.css"
+    },
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.mts",
+    "files": [
+        "dist",
+        "src/index.css"
+    ],
+    "scripts": {
+        "build": "rimraf ./dist && tsdown"
+    },
+    "keywords": [
+        "privateaim",
+        "vuecs",
+        "theme",
+        "tailwindcss",
+        "ui-theme"
+    ],
+    "author": {
+        "name": "Peter Placzek",
+        "email": "contact@tada5hi.net",
+        "url": "https://github.com/tada5hi"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/PrivateAim/hub.git",
+        "directory": "packages/client-vue-theme"
+    },
+    "bugs": {
+        "url": "https://github.com/PrivateAim/hub/issues"
+    },
+    "homepage": "https://github.com/PrivateAim/hub#readme",
+    "dependencies": {
+        "@authup/client-web-kit-theme": "^1.0.0-beta.48",
+        "@vuecs/design": "^1.0.4",
+        "@vuecs/theme-tailwind": "^4.0.0"
+    },
+    "peerDependencies": {
+        "@vuecs/core": "^3.x",
+        "@vuecs/design": "^1.x",
+        "@vuecs/theme-tailwind": "^4.x",
+        "tailwindcss": "^4.x"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/index.css

@@ -0,0 +1,501 @@
+/*!
+ * @privateaim/client-vue-theme — app-level layer on top of
+ * `@authup/client-web-kit-theme`.
+ *
+ * Cascade order (apps consume this file; the kit theme's cascade
+ * is included transitively):
+ *   1. tailwindcss            — via the kit theme
+ *   2. @vuecs/design          — via the kit theme
+ *   3. @vuecs/theme-tailwind  — via the kit theme
+ *   4. privateaim tokens      — project palette / chrome / typography
+ *   5. privateaim compat layer — Bootstrap-shaped class shims (@apply'd
+ *                                from Tailwind utilities). Phased out
+ *                                as templates migrate to <VCButton> /
+ *                                <VCAlert> / etc.
+ */
+
+/*
+ * Kit-theme CSS cascade — consumed from npm.
+ *
+ * `@authup/client-web-kit-theme` 1.0.0-beta.48 fixed the beta.44
+ * packaging bug (published `src/index.css` imported stylesheets missing
+ * from the tarball) that previously forced hub to inline this cascade.
+ * The published `index.css` brings tailwindcss + @vuecs/design +
+ * @vuecs/theme-tailwind, the authup kit-component styles
+ * (tokens/picker/auth/realm/login — formerly
+ * `@authup/client-web-kit/dist/style.css`, which beta.48 no longer
+ * ships), the `.dark` class `@custom-variant`, and `@source` scopes for
+ * the kit's own class strings.
+ *
+ * The two stylesheets under styles/kit-*.css stay vendored: upstream
+ * dropped list.css / form-validation.css from the theme entirely, and
+ * hub's copies carry vc-* class-name deltas on top.
+ */
+@layer theme, vuecs, authup, base, components, utilities;
+
+@import "@authup/client-web-kit-theme/index.css";
+
+/*
+ * Only the theme's own sources are scanned here. Dependency trees
+ * (@vuecs/*, @authup/client-web-kit) must be declared by the CONSUMING
+ * app (see apps/client-ui/assets/css/tailwind.css) — npm hoisting decides
+ * where those packages physically live relative to the app, so
+ * node_modules-relative globs anchored at this package silently miss
+ * them (and previously did: the @authup globs here resolved to
+ * nonexistent paths).
+ */
+@source ".";
+
+@import "./styles/kit-list.css";
+@import "./styles/kit-form-validation.css";
+
+/* ------------------------------------------------------------------
+   PrivateAIM design tokens
+   Override `--vc-color-*` (or palette names via setColorPalette()) to
+   reskin the entire UI without touching component class strings.
+   ------------------------------------------------------------------ */
+@layer base {
+    /*
+     * PrivateAIM chrome + brand tokens. Two shapes:
+     *
+     *   1. Chrome (header, navbar, sidebar, navbar dropdowns) flips with
+     *      mode. Light-mode defaults alias `--vc-color-bg-elevated` /
+     *      `-fg` / `-border` etc. so the chrome reads as a light surface
+     *      distinct from the page-content bg. The `.dark` block below
+     *      restores hub's historical warm-dark chrome palette so the
+     *      chrome stays the recognizable dark grey.
+     *
+     *   2. Brand accents (coral, teal, purple, blue, rust) carry hub's
+     *      identity and are hard-coded; they read fine on both light and
+     *      dark backgrounds. They are used as text/accent colors on
+     *      chrome surfaces, so they flip alongside the chrome they sit on.
+     */
+    :root {
+        /* Chrome — light-mode defaults, alias semantic vuecs tokens */
+        --privateaim-chrome-bg:             var(--vc-color-bg-elevated);
+        --privateaim-chrome-bg-elevated:    var(--vc-color-bg-muted);
+        --privateaim-chrome-fg:             var(--vc-color-fg);
+        --privateaim-chrome-fg-muted:       var(--vc-color-fg-muted);
+        --privateaim-chrome-border:         var(--vc-color-border);
+        /* Chrome edge where it meets the content — `-bottom` for top chrome
+           (header / sidebar-header), `-top` for bottom chrome (footer).
+           Light mode: a soft drop shadow so the fixed chrome reads as
+           raised above the content (the dark inset band used in dark mode
+           would be a muddy grey stripe on a light surface). */
+        --privateaim-chrome-edge-shadow-bottom: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+        --privateaim-chrome-edge-shadow-top:    0 -2px 8px 0 rgba(0, 0, 0, 0.06);
+        --privateaim-chrome-edge-shadow-right:  2px 0 8px 0 rgba(0, 0, 0, 0.06);
+
+        /* Brand accents — unchanged across modes */
+        --privateaim-brand-coral:           #FF5B5B;
+        --privateaim-brand-teal:            #4ECDC4;
+        --privateaim-brand-purple:          #6259ca;
+        --privateaim-brand-blue:            #2776dc;
+        --privateaim-brand-rust:            #a6592d;
+
+        /*
+         * Primary palette → hub brand coral. Overrides the vuecs primary
+         * scale (which @vuecs/design aliases to blue); theme-tailwind
+         * bridges `--color-primary-*` from these, so every `primary`
+         * utility/component (buttons, active states, rings) adopts the
+         * brand coral. Tints/shades are color-mixed from the brand var so
+         * the whole scale stays in sync with it; the pure brand sits at
+         * 600 — the shade buttons and active states use.
+         */
+        --vc-color-primary-50:  color-mix(in oklab, var(--privateaim-brand-coral) 8%,  white);
+        --vc-color-primary-100: color-mix(in oklab, var(--privateaim-brand-coral) 16%, white);
+        --vc-color-primary-200: color-mix(in oklab, var(--privateaim-brand-coral) 32%, white);
+        --vc-color-primary-300: color-mix(in oklab, var(--privateaim-brand-coral) 52%, white);
+        --vc-color-primary-400: color-mix(in oklab, var(--privateaim-brand-coral) 74%, white);
+        --vc-color-primary-500: color-mix(in oklab, var(--privateaim-brand-coral) 90%, white);
+        --vc-color-primary-600: var(--privateaim-brand-coral);
+        --vc-color-primary-700: color-mix(in oklab, var(--privateaim-brand-coral) 82%, black);
+        --vc-color-primary-800: color-mix(in oklab, var(--privateaim-brand-coral) 64%, black);
+        --vc-color-primary-900: color-mix(in oklab, var(--privateaim-brand-coral) 50%, black);
+        --vc-color-primary-950: color-mix(in oklab, var(--privateaim-brand-coral) 32%, black);
+    }
+
+    /*
+     * Dark-mode overrides. Two distinct moves:
+     *
+     *   a) Restore hub's historical warm-dark chrome palette so the dark
+     *      chrome stays the recognizable dark grey rather than vuecs's
+     *      `bg-elevated` value, which would blend into the page-content bg.
+     *
+     *   b) Soften the content background. `@vuecs/design`'s `.dark` puts
+     *      `--vc-color-bg` at neutral-900 (~20.5% L) — near-black — which
+     *      feels harsh against hub's warm dark chrome. Lift it so the
+     *      content surface pairs with the chrome as a gentle tonal step.
+     */
+    .dark {
+        --privateaim-chrome-bg:             rgb(64, 67, 78);
+        --privateaim-chrome-bg-elevated:    #32333B;
+        --privateaim-chrome-fg:             #ffffff;
+        --privateaim-chrome-fg-muted:       #aeb2b7;
+        --privateaim-chrome-border:         #333333;
+        /* Recessed band — hub's historical raised-dark-chrome edge. The
+           sidebar's right edge stays shadow-free: the chrome/content tonal
+           step carries the separation in dark mode. */
+        --privateaim-chrome-edge-shadow-bottom: 0 -6px 0 0 rgba(0, 0, 0, 0.3) inset;
+        --privateaim-chrome-edge-shadow-top:    0 6px 0 0 rgba(0, 0, 0, 0.3) inset;
+        --privateaim-chrome-edge-shadow-right:  none;
+
+        /*
+         * Content surface — soft dark that pairs with the warm chrome
+         * (#40434E) as a gentle tonal step. @vuecs/design's dark `--vc-color-fg`
+         * is light (neutral-200), so the surface MUST stay dark; the prior
+         * `neutral-400` (a light-mid grey) left light text on light grey
+         * (~1.7:1, unreadable). Content sits a touch darker than the chrome so
+         * the sidebar/header read as raised panels.
+         */
+        --vc-color-bg: #2a2d35;
+        --vc-color-bg-muted: #343742;
+        --vc-color-border: #3e414c;
+
+        /*
+         * Warning / danger surfaces — tinted panels (alert-warning,
+         * alert-danger, list no-more / empty markers). Hand-tuned
+         * mid-lightness, low-chroma tones: the palette deep ends
+         * (orange-950 / red-950) read brown/black against the soft dark
+         * content surface. Border sits a step lighter than the fill
+         * (edge highlight); panel text is a hue-matched near-white.
+         */
+        --privateaim-warning-surface:        oklch(0.55 0.06 66.93);
+        --privateaim-warning-surface-border: oklch(0.65 0.08 66.93);
+        --privateaim-warning-surface-fg:     oklch(0.97 0.02 66.93);
+
+        --privateaim-danger-surface:         oklch(0.45 0.11 22.78);
+        --privateaim-danger-surface-border:  oklch(0.55 0.13 22.78);
+        --privateaim-danger-surface-fg:      oklch(0.97 0.015 22.78);
+
+        --privateaim-info-surface:           oklch(0.5 0.08 237);
+        --privateaim-info-surface-border:    oklch(0.6 0.1 237);
+        --privateaim-info-surface-fg:        oklch(0.97 0.015 237);
+
+        /*
+         * Standalone warning / danger text (`.text-warning` /
+         * `.text-danger`) — same hues as the surfaces, lifted to stay
+         * readable on the dark content background (the surface values
+         * themselves land below ~3:1 as text).
+         */
+        --privateaim-warning-text:           oklch(0.75 0.1 66.93);
+        --privateaim-danger-text:            oklch(0.7 0.14 22.78);
+        --privateaim-info-text:              oklch(0.75 0.12 237);
+    }
+
+    /*
+     * Tailwind v4 preflight resets every heading to inherit the parent
+     * font-size. Restore the heading size scale here once, project-wide.
+     * Font-family + font-weight come from styles/root.css.
+     */
+    h1 { @apply text-4xl; }
+    h2 { @apply text-3xl; }
+    h3 { @apply text-2xl; }
+    h4 { @apply text-xl; }
+    h5 { @apply text-lg; }
+    h6 { @apply text-base; }
+
+    /*
+     * Tailwind v4 preflight sets `svg { display: block }`, which breaks
+     * inline icon-next-to-text layouts. `@iconify/vue` tags every
+     * rendered SVG with `class="iconify ..."` — scope the override to
+     * those so full-bleed `<svg>` illustrations keep `display: block`.
+     */
+    svg.iconify {
+        display: inline-block;
+        vertical-align: -0.125em;
+    }
+
+    /*
+     * Pin Iconify icons inside nav-links to a fixed 1rem box. Without
+     * this the SVG sizes against the inherited font-size (which varies
+     * between the navbar's smaller letter-spaced text and elsewhere),
+     * and the width="0.75em" / width="1em" attributes from @iconify/vue
+     * render at different pixel widths depending on context, breaking
+     * cross-axis alignment of sibling nav items. Pre-migration the
+     * anchor `<i>` icons were size-pinned via
+     * `.navbar-gadgets > li > a i { font-size: 16px }` in core/navbar.css;
+     * the SVG path needs the equivalent.
+     */
+    .vc-nav-link svg.iconify {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    /*
+     * Tailwind v4 preflight resets `<hr>` margins to 0. Restore vertical
+     * rhythm + a muted divider color project-wide.
+     */
+    hr {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        border-color: var(--vc-color-border);
+    }
+
+    /*
+     * Plain text-alignment helpers. Hub's templates use `text-left` /
+     * `text-right` directly (carried over from the Bootstrap era); both
+     * collide with Tailwind utilities of the same name, so keep them in
+     * `@layer base` where the utility layer still wins when both apply.
+     */
+    .text-left  { text-align: left; }
+    .text-right { text-align: right; }
+}
+
+/* ------------------------------------------------------------------
+   Bootstrap-compat layer
+   Provides the Bootstrap-shaped utility / component class names that
+   hub's pre-Tailwind templates still reference. Each rule `@apply`s
+   Tailwind utilities — same visual contract, no `bootstrap` dep, and
+   the rules disappear automatically when the last caller is rewritten
+   to a `<VC*>` component.
+   ------------------------------------------------------------------ */
+@layer components {
+    /* Buttons --------------------------------------------------------- */
+    .btn {
+        @apply inline-flex items-center justify-center gap-1 rounded-md
+               border border-transparent px-3 py-1.5 text-sm font-medium
+               transition-colors cursor-pointer
+               focus-visible:outline-2 focus-visible:outline-offset-2
+               focus-visible:outline-primary-500
+               disabled:opacity-50 disabled:cursor-not-allowed;
+    }
+    .btn-xs    { @apply px-1.5! py-1.25! text-xs!; }
+    .btn-sm    { @apply px-2! py-1! text-xs!; }
+    .btn-md    { @apply px-2! py-1! text-base!; }
+    .btn-lg    { @apply px-4! py-2! text-base!; }
+    .btn-block { @apply block w-full; }
+
+    .btn-primary   { @apply bg-primary-600 text-on-primary hover:bg-primary-700; }
+    .btn-secondary { @apply bg-bg-elevated text-fg         hover:bg-bg-muted; }
+    .btn-success   { @apply bg-success-600 text-on-success hover:bg-success-700; }
+    .btn-danger    { @apply bg-error-600   text-on-error   hover:bg-error-700; }
+    .btn-warning   { @apply bg-warning-500 text-on-warning hover:bg-warning-600; }
+    /* btn-info is reachable only via dynamic `btn-${classSuffix}`
+       (F*Command components) — keep it despite zero static users. */
+    .btn-info      { @apply bg-info-500    text-on-info    hover:bg-info-600; }
+    .btn-dark      { @apply bg-fg          text-bg         hover:opacity-80; }
+
+    /* Semantic color aliases — status/approval components build
+       `text-${suffix}` / `bg-${suffix}` / `btn-${suffix}` dynamically
+       (FProcessStatus, F*ApprovalStatus, F*Command, …), which the Tailwind
+       scanner cannot see; these map the Bootstrap-era bare names onto the
+       token scale. `bg-dark` / `bg-secondary` pair with white `text-light`
+       chips, so they pin the RAW neutral scale (mode-stable) rather than
+       the flipped semantic `fg` token. */
+    .text-primary { @apply text-primary-600; }
+    .text-success { @apply text-success-600; }
+    .text-warning { @apply text-warning-600; }
+    .text-danger  { @apply text-error-600; }
+    .text-info    { @apply text-info-600; }
+    .text-dark    { @apply text-fg; }
+    .text-light   { @apply text-white; }
+
+    /* Dark mode — the 600 weights are tuned for light surfaces and turn
+       harsh/dim on the dark content bg; lift warning/danger/info to the
+       hand-tuned text tokens (same hues as the alert surfaces). */
+    .dark .text-warning { color: var(--privateaim-warning-text); }
+    .dark .text-danger  { color: var(--privateaim-danger-text); }
+    .dark .text-info    { color: var(--privateaim-info-text); }
+
+    .bg-primary   { @apply bg-primary-600; }
+    .bg-success   { @apply bg-success-600; }
+    .bg-warning   { @apply bg-warning-500; }
+    /* 500 (not 600) — Tailwind red-600 reads much harsher than the old
+       Bootstrap #dc3545 on the white-text node execution status banner
+       (the only `bg-danger` consumer); 500 matches bg-warning's weight. */
+    .bg-danger    { @apply bg-error-500; }
+    .bg-secondary { background-color: var(--vc-color-neutral-500); }
+    .bg-dark      { background-color: var(--vc-color-neutral-800); }
+
+    .btn-outline-primary   { @apply border-primary-600  text-primary-600 hover:bg-primary-600 hover:text-on-primary; }
+    .btn-outline-secondary { @apply border-border       text-fg          hover:bg-bg-muted; }
+    .btn-outline-danger    { @apply border-error-600    text-error-600   hover:bg-error-600   hover:text-on-error; }
+    .btn-outline-info      { @apply border-info-500     text-info-600    hover:bg-info-500    hover:text-on-info; }
+    .btn-outline-dark      { @apply border-fg           text-fg          hover:bg-fg          hover:text-bg; }
+
+    /* Grid — Bootstrap-style 12-col layout via flex (not CSS grid). */
+    .row     { @apply flex flex-wrap; margin-left: -0.5rem; margin-right: -0.5rem; }
+    .col     { @apply flex-1 basis-0 px-2; }
+    .col-1   { @apply w-1/12 px-2; }
+    .col-2   { @apply w-2/12 px-2; }
+    .col-3   { @apply w-3/12 px-2; }
+    .col-4   { @apply w-4/12 px-2; }
+    .col-5   { @apply w-5/12 px-2; }
+    .col-6   { @apply w-6/12 px-2; }
+    .col-7   { @apply w-7/12 px-2; }
+    .col-8   { @apply w-8/12 px-2; }
+    .col-9   { @apply w-9/12 px-2; }
+    .col-10  { @apply w-10/12 px-2; }
+    .col-11  { @apply w-11/12 px-2; }
+    .col-12  { @apply w-full px-2; }
+
+    /* Responsive columns — md+ breakpoint (hub uses col-sm, col-md, col-lg variants). */
+    .col-sm    { @apply px-2 sm:flex-1 sm:basis-0; }
+    .col-sm-4  { @apply w-full px-2 sm:w-4/12; }
+    .col-md    { @apply px-2 md:flex-1 md:basis-0; }
+    .col-md-3  { @apply w-full px-2 md:w-3/12; }
+    .col-md-4  { @apply w-full px-2 md:w-4/12; }
+    .col-md-6  { @apply w-full px-2 md:w-6/12; }
+    .col-lg-6  { @apply w-full px-2 lg:w-6/12; }
+
+    .container       { @apply mx-auto w-full max-w-screen-lg px-4; }
+    .container-fluid { @apply w-full px-4; }
+
+    /* Cards — the full mechanism (base + variants, all variable-driven)
+       lives in styles/card.css, imported below into @layer components. */
+
+    /* Alerts ---------------------------------------------------------
+       The tinted variants use raw palette steps that do NOT flip with
+       the mode — in dark mode the light `*-50` fills glare against the
+       dark surface, so each variant carries a deep-end dark recipe
+       (950 fill / 900 border / 300 text). `.alert-dark` builds on
+       semantic tokens and adapts on its own. */
+    .alert         { @apply relative mb-3 rounded-md border px-4 py-3; }
+    .alert-sm      { @apply px-3 py-2 text-sm; }
+    .alert-primary { @apply border-primary-200 bg-primary-50 text-primary-700 dark:border-primary-900 dark:bg-primary-950 dark:text-primary-300; }
+    .alert-success { @apply border-success-200 bg-success-50 text-success-700 dark:border-success-900 dark:bg-success-950 dark:text-success-300; }
+    /* Orange scale (not the amber `warning` tokens) — amber's dark end
+       reads brown; orange keeps the warm tone in both modes. */
+    .alert-warning { @apply border-orange-200 bg-orange-50 text-orange-700; }
+    .alert-danger  { @apply border-error-200   bg-error-50   text-error-700; }
+    .alert-info    { @apply border-info-200    bg-info-50    text-info-700; }
+    .alert-dark    { @apply border-border bg-bg-elevated text-fg; }
+
+    /* Warning / danger / info dark recipes use the hand-tuned surface
+       tokens (see the `.dark` token block above) — the palette deep
+       ends the other variants use read brown/black/near-navy. */
+    .dark .alert-warning {
+        background-color: var(--privateaim-warning-surface);
+        border-color: var(--privateaim-warning-surface-border);
+        color: var(--privateaim-warning-surface-fg);
+    }
+    .dark .alert-danger {
+        background-color: var(--privateaim-danger-surface);
+        border-color: var(--privateaim-danger-surface-border);
+        color: var(--privateaim-danger-surface-fg);
+    }
+    .dark .alert-info {
+        background-color: var(--privateaim-info-surface);
+        border-color: var(--privateaim-info-surface-border);
+        color: var(--privateaim-info-surface-fg);
+    }
+
+    /* Badges --------------------------------------------------------- */
+    .badge {
+        @apply inline-flex items-center rounded-full px-2 py-0.5
+               text-xs font-medium;
+    }
+
+    /* Progress — Bootstrap-shaped track + bar (analysis build/exec/
+       distribution steps, master-image card). The bar's color comes from a
+       `bg-*` utility on the markup and its width from an inline style; this
+       only restores the structure Bootstrap used to provide. */
+    .progress {
+        /* `bg-bg` (the base content surface) + a border, NOT `bg-bg-muted`:
+           the track is mostly consumed inside `.card-grey` whose `--card-bg`
+           IS `bg-bg-muted`, so a muted track vanished into the card. The
+           darker base fill reads as a recessed groove and the border keeps
+           the shape detectable on any surface. */
+        @apply flex h-4 overflow-hidden rounded-md border border-border bg-bg text-xs;
+    }
+    .progress-bar {
+        @apply flex flex-col justify-center overflow-hidden whitespace-nowrap
+               text-center text-white;
+        transition: width 0.5s ease;
+    }
+
+    /* Nav / navbar --------------------------------------------------- */
+    .nav             { @apply flex flex-wrap; }
+    .nav-item        { @apply list-none; }
+    .nav-link        { @apply block px-3 py-2 text-fg hover:text-primary-600 no-underline; }
+    .nav-link.active { @apply text-primary-600; }
+    .navbar          { @apply flex flex-wrap items-center justify-between; }
+    .navbar-nav      { @apply flex flex-col list-none; }
+    .navbar-toggler  { @apply rounded border border-border px-2 py-1; }
+    .navbar-collapse { @apply grow basis-full items-center; }
+
+    .navbar-collapse:not(.show)        { @apply hidden; }
+    .navbar-expand-md .navbar-collapse { @apply md:flex!; }
+    .navbar-expand-md .navbar-nav      { @apply md:flex-row!; }
+    .navbar-expand-md                  { @apply md:flex-nowrap md:justify-start; }
+
+    /* Forms — minimal shims (vuecs SFCs own the real form styles) ---- */
+    .form-group   { @apply mb-3; }
+    .form-switch  { @apply inline-flex items-center gap-2; }
+
+    /* Pagination — joined-tab look over theme-tailwind's per-button
+       rounded-md. */
+    .vc-pagination .vc-pagination-link {
+        @apply !rounded-none;
+        margin-left: -1px;
+    }
+    .vc-pagination > :first-child .vc-pagination-link {
+        @apply !rounded-l-md;
+        margin-left: 0;
+    }
+    .vc-pagination > :last-child .vc-pagination-link {
+        @apply !rounded-r-md;
+    }
+
+    /* Form validation visual state. */
+    .is-valid {
+        @apply border-success-600 ring-1 ring-success-500;
+    }
+
+    /* Dropdowns — Bootstrap-style toggle/menu (also used by the
+       navbar/sidebar chrome). The `hidden` on `.dropdown-menu` is
+       load-bearing; the toggle's click handler flips `.show`. */
+    .dropdown { @apply relative; }
+    .dropdown-toggle { @apply cursor-pointer; }
+    .dropdown-menu {
+        @apply absolute top-full left-0 z-50 hidden min-w-40 rounded-md
+               border border-border bg-bg py-1 shadow-md;
+    }
+    .dropdown-menu-end { @apply left-auto right-0; }
+    .dropdown-menu.show { @apply block; }
+    .dropdown-item {
+        @apply block w-full cursor-pointer border-0 bg-transparent
+               px-3 py-1 text-left text-sm text-fg hover:bg-bg-muted;
+    }
+    .dropdown-item.active {
+        @apply bg-primary-600 text-on-primary hover:bg-primary-700;
+    }
+    .dropdown-divider { @apply my-1 h-px bg-border; }
+
+    /* Modal — INNER chrome only. The backdrop / positioning shell is
+       owned by Reka / <VCModalContent> (@vuecs/overlays); hub mounts
+       VCModal compound directly. These rules style the structural
+       classes still carried on the markup inside <VCModalContent>
+       (.modal-header / .modal-body / .modal-footer / .modal-title /
+       .btn-close). */
+    .modal-header   { @apply flex items-center justify-between border-b border-border px-4 py-3; }
+    .modal-title    { @apply font-semibold; }
+    .modal-body     { @apply px-4 py-3; }
+    .modal-footer   { @apply flex items-center justify-end gap-2 border-t border-border px-4 py-3; }
+    .btn-close {
+        @apply cursor-pointer border-0 bg-transparent text-fg-muted
+               hover:text-fg;
+    }
+}
+
+/* ------------------------------------------------------------------
+   PrivateAIM app styles — chrome (header, navbar, sidebar, body)
+   + project utilities + login chrome. Layered LAST so app-specific
+   selectors win over the Tailwind utility / compat layers when the
+   classes overlap.
+   ------------------------------------------------------------------ */
+@import "./styles/root.css";
+@import "./styles/colors.css";
+@import "./styles/domain.css";
+@import "./styles/card.css";
+@import "./styles/vue-layout-navigation.css";
+@import "./styles/vue-form-wizard.css";
+@import "./styles/core/header.css";
+@import "./styles/core/navbar.css";
+@import "./styles/core/body.css";
+@import "./styles/core/sidebar.css";
+
+/* Pagination hover/focus preview lives in the JS theme —
+   `clientVueTheme()` (src/index.ts) extends the pagination `link` theme
+   classes instead of fighting `@layer utilities` from here. */