@trineui/cli 0.3.0 → 0.4.0

package/README.md

@@ -1,60 +1,204 @@
 # @trineui/cli
 
-Canonical public package:
+`@trineui/cli` is the public Trine CLI for the current Button-first baseline.
+
+Current public baseline:
+
+- guided `init`
+- `add button`
+- Button is the only public component baseline in scope
+- Angular has the strongest proof coverage right now
+
+Canonical public flow:
 
 ```bash
+npx @trineui/cli@latest init
 npx @trineui/cli@latest add button
 ```
 
-Registry status note:
+`init` is guided by default. Use `--yes` for non-interactive mode.
+
+## What Works Right Now
+
+The current public Trine baseline is intentionally narrow.
+
+It supports:
+
+- preparing a supported Angular app with `init`
+- delivering a consumer-owned Button with `add button`
+- wiring a local `@trine/ui` alias into the target app
+- injecting the Trine styling baseline into the target app's real global stylesheet entry
+- local customization by editing `button.skin.ts` or adding semantic variable overrides below the Trine-managed block
+
+It does not currently support:
+
+- more components than Button
+- automatic prerequisite installation
+- automatic usage-surface scaffolding
+- broad framework coverage claims beyond the current Angular-first baseline
+
+## Before You Start
+
+### Supported target shape
+
+The current proven target shape is an Angular app with:
+
+- `src/app`
+- `tsconfig.app.json`
+- a valid global stylesheet entry such as:
+  - `src/styles.scss`
+  - `src/styles.css`
+  - `src/global.scss`
+  - or a build styles entry resolved from `angular.json`
+
+`init` can distinguish `angular` and `ionic-angular`, but Angular has the strongest live proof coverage today.
+
+### Manual prerequisites
+
+The live CLI still expects these prerequisites to be installed manually in the target repo.
+
+For the current Button baseline, these are hard requirements rather than optional enhancements:
+
+```bash
+npm install class-variance-authority
+npm install -D tailwindcss@^4 @tailwindcss/postcss postcss
+```
+
+The current baseline also expects PostCSS configuration in the target repo:
+
+`.postcssrc.json`
+
+```json
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}
+```
+
+Use a Node LTS line supported by Angular 21 in the target repo. Odd-numbered Node releases can build with warnings.
+
+For the styling-layer contract behind these requirements, see:
+
+- `docs/01-overview/05-styling-contract.md`
+
+## Quickstart
+
+### 1. Run guided init
+
+From the app root:
+
+```bash
+npx @trineui/cli@latest init
+```
+
+If you prefer non-interactive mode:
 
-- live npm `@latest` is currently `0.1.2`
-- repo-local next publish candidate is `0.2.0`
-- the live registry package currently exposes `add button`
-- `init` is implemented in this repo and included in the next publish candidate, but it is not available from the live npm package until publish succeeds
+```bash
+npx @trineui/cli@latest init --yes
+```
 
-Repository-local current command surface:
+If you are inside a workspace root or want to target a specific app:
 
 ```bash
-trine init [--target <app-root>] [--yes]
-trine add button --target <app-root>
+npx @trineui/cli@latest init --target /absolute/path/to/app
 ```
 
-Notes:
+`init` currently:
+
+- detects the target app
+- detects `angular` vs `ionic-angular`
+- resolves the target stylesheet entry
+- previews file changes before mutation
+- injects a named Trine-managed styling block into the resolved global stylesheet entry
+- ensures `src/app/components/ui/index.ts`
+- ensures local `@trine/ui` in `tsconfig.app.json`
+- ensures the stylesheet block includes semantic tokens, `.dark` overrides, and Tailwind v4 `@theme inline` mapping
+
+`init` does not currently install Tailwind/PostCSS/CVA or generate `.postcssrc.json` for you.
+
+Rerunning `init` on an already prepared target should no-op cleanly.
+
+### 2. Deliver Button
+
+```bash
+npx @trineui/cli@latest add button
+```
+
+Or explicitly:
+
+```bash
+npx @trineui/cli@latest add button --target /absolute/path/to/app
+```
+
+`add button` currently delivers:
+
+- `src/app/components/ui/button/button.ts`
+- `src/app/components/ui/button/button.html`
+- `src/app/components/ui/button/button.skin.ts`
+- `src/app/components/ui/button/index.ts`
+- `src/app/components/ui/index.ts`
+
+It fails clearly if consumer-owned Button files already exist. It does not silently overwrite them.
 
-- `init` is now the preferred first step for project readiness; `add button` still works without it for backward compatibility
-- `init` is guided by default: it detects the target, surfaces warnings, previews file changes, and asks for confirmation before mutation
-- `init --yes` keeps a non-interactive fast path for automation and scripting
-- `button` is the only supported component in this public-style baseline
-- omitting `--target` uses the current directory when it already matches the supported Angular app shape
-- when the current directory is not a supported Angular app target, the CLI auto-detects a single Angular app target under the current directory and proceeds automatically
-- when multiple Angular app targets are found, guided `init` lets the user choose one interactively
-- when multiple Angular app targets are found, `init --yes` and `add button` fail clearly and ask for `--target <app-root>`
-- when multiple plausible stylesheet entries are found, guided `init` lets the user choose one interactively
-- when multiple plausible stylesheet entries are found, `init --yes` fails clearly and asks the user to rerun without `--yes`
-- external targets can run `trine add button` from the app root or pass an explicit app root such as `--target /absolute/path/to/angular-app`
-- `init` detects `angular` and `ionic-angular` targets conservatively; unsupported targets fail clearly
-- the canonical public package name is `@trineui/cli`
-- the CLI command exposed through the package bin is still `trine`
-- `apps/consumer-fixture` is the first separate-target proof and does not use the demo-only `@trine/ui/*` bridge
-- `/tmp/trine-button-publish-proof` is the latest truly external packaged-proof repo outside the monorepo
-- packaged/public-style proof uses a packed local tarball to simulate `npx @trineui/cli@latest add button`
-- the packaged CLI ships compiled runtime files plus Button templates so it can execute from `node_modules` in a real `npx`-style flow
-- `init` ensures `src/styles/tokens.css`, `src/styles/trine-consumer.css`, `src/app/components/ui/index.ts`, the local `@trine/ui` alias, and local stylesheet wiring
-- rerunning `init` on an already prepared target exits cleanly with a no-op summary instead of prompting again
-- consumer-owned component destination files cause a clear failure
-- existing shared baseline files (`tokens.css` and `trine-consumer.css`) are preserved so a second component can be added into the same target repo
-- the command copies consumer-owned source instead of wiring runtime back to `packages/ui`
-- for `apps/demo`, `@trine/ui` resolves locally for delivered components while `@trine/ui/*` temporarily bridges non-localized components back to the authoring source
-- the delivered shared styling baseline is `tokens.css` + `trine-consumer.css`
-- the current proven target dependency baseline is Angular 21, Tailwind CSS v4, and `class-variance-authority`
-- the current proven target shape accepts a global stylesheet entry such as `src/styles.scss`, `src/styles.css`, or `src/global.scss` when it is resolved from `angular.json`
-- use a Node LTS line supported by Angular 21 in the target repo; odd-numbered Node releases can build with warnings
-- when `package.json` is present in the target root, the CLI warns if Tailwind CSS v4 or `class-variance-authority` are missing
+### 3. Render a small proof
 
-Local package proof equivalent:
+Import `TrineButton` from local `@trine/ui` and render a small proof surface:
+
+```ts
+import { Component } from '@angular/core';
+import { TrineButton } from '@trine/ui';
+
+@Component({
+  selector: 'app-root',
+  imports: [TrineButton],
+  template: `
+    <trine-button>Primary action</trine-button>
+    <trine-button variant="secondary">Secondary action</trine-button>
+    <trine-button [loading]="true">Saving</trine-button>
+  `,
+})
+export class App {}
+```
+
+### 4. Build the target app
 
 ```bash
-npx --yes --package /absolute/path/to/trineui-cli-<version>.tgz trine init
-npx --yes --package /absolute/path/to/trineui-cli-<version>.tgz trine add button
+npm run build
 ```
+
+Successful verification usually means:
+
+- the app builds
+- `@trine/ui` resolves to local consumer source
+- the resolved stylesheet entry contains a Trine-managed baseline block
+- Button renders from local delivered files
+
+## Customize Locally
+
+Trine uses a copy-paste ownership model.
+
+After delivery, the consumer repo owns the visual layer.
+
+The two main local customization paths are:
+
+- edit `src/app/components/ui/button/button.skin.ts`
+- add semantic variable overrides below the Trine-managed block in the resolved global stylesheet entry
+
+This is the intended model. Trine does not keep runtime ownership of the Button visuals after delivery.
+
+## Current Limitations
+
+- Button-only public baseline
+- manual prerequisites still required
+- usage surface is not scaffolded automatically
+- Angular has the strongest live proof coverage; Ionic Angular coverage is narrower
+- multiple target apps still require `--target` or guided selection
+- `src/styles.scss` and `src/global.scss` currently work, but Angular 21 surfaces a Sass deprecation warning for `@import 'tailwindcss';`
+- the baseline is intentionally narrow and not yet a broader component platform
+
+## Full Walkthrough
+
+For a fuller repo-level walkthrough of the current baseline, see:
+
+- `docs/01-overview/04-cli-getting-started.md`

package/dist/add-component.js

@@ -1,6 +1,6 @@
 import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
-import { TEMPLATE_ROOT, ensureLinesFile, ensureSharedStyleBaseline, ensureStylesImport, ensureTsconfigAlias, isDemoTarget, readTargetDependencyWarnings, resolveSupportedProjectTarget, toTargetRelativePath, } from "./project.js";
+import { TEMPLATE_ROOT, ensureLinesFile, ensureTrineStylesheetBaseline, ensureTsconfigAlias, isDemoTarget, readTargetDependencyWarnings, resolveSupportedProjectTarget, toTargetRelativePath, } from "./project.js";
 const DEMO_BRIDGE_COMMENT = '// Temporary demo verification bridge: delivered local components resolve locally; other components still re-export from the authoring source.';
 const DEMO_LOCAL_COMPONENTS = [
     {
@@ -76,10 +76,9 @@ export function addComponent(manifest, options) {
         copyFileSync(source, destination);
     }
     const componentCopiedFiles = componentCopyTargets.map(({ destination }) => toTargetRelativePath(targetRoot, destination));
-    const sharedStylesResult = ensureSharedStyleBaseline(targetRoot, manifest.componentLabel);
-    const copiedFiles = [...componentCopiedFiles, ...sharedStylesResult.createdFiles];
+    const copiedFiles = [...componentCopiedFiles];
     const updatedFiles = [];
-    const warnings = [...sharedStylesResult.warnings];
+    const warnings = [];
     const componentBarrelPath = path.join(componentDestDir, 'index.ts');
     if (ensureLinesFile(componentBarrelPath, [manifest.barrelLine])) {
         updatedFiles.push(toTargetRelativePath(targetRoot, componentBarrelPath));
@@ -94,12 +93,13 @@ export function addComponent(manifest, options) {
     if (ensureTsconfigAlias(targetTsconfig, targetRoot, options.cwd)) {
         updatedFiles.push(toTargetRelativePath(targetRoot, targetTsconfig));
     }
-    const stylesResult = ensureStylesImport(targetStylesEntry);
+    const stylesResult = ensureTrineStylesheetBaseline(targetRoot, targetStylesEntry);
     if (stylesResult.updated) {
         updatedFiles.push(toTargetRelativePath(targetRoot, targetStylesEntry));
     }
+    warnings.push(...stylesResult.warnings);
     if (stylesResult.authoringImportStillPresent) {
-        warnings.push(`${toTargetRelativePath(targetRoot, targetStylesEntry)} still imports @trine/ui/styles/trine.css for the broader demo authoring baseline.`);
+        warnings.push(`${toTargetRelativePath(targetRoot, targetStylesEntry)} keeps the repo-local @trine/ui/styles/trine.css authoring entry so apps/demo can still validate non-localized components during local development.`);
     }
     if (isDemoTarget(targetRoot)) {
         warnings.push('apps/demo keeps non-localized components on a temporary @trine/ui/* bridge back to packages/ui so the full demo app can still build while delivered components resolve locally.');

package/dist/index.js

@@ -19,13 +19,13 @@ Defaults:
 
 Notes:
   - v0 supports init plus add button only
-  - init owns target detection, framework detection, stylesheet resolution, baseline files, local @trine/ui alias setup, and local stylesheet wiring
+  - init owns target detection, framework detection, stylesheet resolution, Trine-managed global stylesheet injection, and local @trine/ui alias setup
   - add button still works without init for backward compatibility, but init is the preferred first step
   - the current proven target model is Angular 21 + src/app + tsconfig.app.json + a global stylesheet entry such as src/styles.scss, src/styles.css, or src/global.scss resolved directly or from angular.json
   - v0 distinguishes angular and ionic-angular targets; unsupported frameworks fail clearly
-  - the current proven styling/runtime baseline requires Tailwind CSS v4 and class-variance-authority in the target repo
+  - the current proven styling/runtime baseline requires Tailwind CSS v4, PostCSS with @tailwindcss/postcss, and class-variance-authority in the target repo
   - consumer-owned component files fail clearly if they already exist
-  - shared styling baseline files are copied when missing and preserved when they already exist
+  - init injects a Trine-managed styling block into the resolved global stylesheet entry instead of copying separate shared CSS files
   - @trine/ui is configured as a consumer-local alias inside the target app
   - apps/demo keeps a temporary @trine/ui/* bridge for non-localized components during local repo verification`;
 const SUPPORTED_COMPONENTS = ['button'];
@@ -245,7 +245,7 @@ function printInitSuccess(result, selection) {
     if (result.warnings.length > 0) {
         lines.push('', 'Warnings:', ...result.warnings.map((warning) => `- ${warning}`));
     }
-    lines.push('', 'Manual next steps:', '- Review prerequisite warnings and install anything still missing before building the target app.', '- Run trine add button when you want to deliver the first Trine component into this project.', '- Build the target app and confirm @trine/ui resolves through the local consumer-owned source tree.');
+    lines.push('', 'Manual next steps:', '- Review prerequisite warnings and install anything still missing before building the target app.', '- Run trine add button when you want to deliver the first Trine component into this project.', '- Build the target app and confirm @trine/ui resolves through the local consumer-owned source tree.', '- If you want token-level customization, add semantic variable overrides below the Trine-managed block in the global stylesheet instead of editing inside the managed block.');
     console.log(lines.join('\n'));
 }
 function printAddSuccess(component, result, selection) {
@@ -260,7 +260,7 @@ function printAddSuccess(component, result, selection) {
     if (result.warnings.length > 0) {
         lines.push('', 'Warnings:', ...result.warnings.map((warning) => `- ${warning}`));
     }
-    lines.push('', 'Manual next steps:', `- Ensure the target repo has Tailwind CSS v4 and class-variance-authority installed before building the delivered ${componentLabel}.`, `- Build the target app and confirm ${componentLabel} imports resolve through the local @trine/ui alias.`, `- Review the copied ${component}.skin.ts and tokens.css if you want local consumer customization.`, '- For future setup in this repo, prefer running trine init first so project-level Trine baseline files are already in place.');
+    lines.push('', 'Manual next steps:', `- Ensure the target repo has Tailwind CSS v4, PostCSS with @tailwindcss/postcss, and class-variance-authority installed before building the delivered ${componentLabel}.`, `- Build the target app and confirm ${componentLabel} imports resolve through the local @trine/ui alias.`, `- Review the copied ${component}.skin.ts if you want component-level local customization.`, '- Add semantic token overrides below the Trine-managed global stylesheet block if you want app-level visual customization that survives rerunning init.', '- For future setup in this repo, prefer running trine init first so the project-level Trine baseline is already in place.');
     if (isRepoDemoVerification) {
         lines.push('- Open /validation-shell and review the CLI delivery proof section for the temporary demo verification path.');
     }

package/dist/init.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { ensureSharedStyleBaseline, ensureStylesImport, ensureTsconfigAlias, ensureUiRootBarrel, inspectSharedStyleBaseline, inspectStylesImport, inspectTsconfigAlias, inspectUiRootBarrel, isDemoTarget, readTargetDependencyWarnings, resolveSupportedProjectTarget, toTargetRelativePath, } from "./project.js";
+import { ensureTrineStylesheetBaseline, ensureTsconfigAlias, ensureUiRootBarrel, inspectTrineStylesheetBaseline, inspectTsconfigAlias, inspectUiRootBarrel, isDemoTarget, readTargetDependencyWarnings, resolveSupportedProjectTarget, toTargetRelativePath, } from "./project.js";
 export function planInitProject(options) {
     const targetRoot = path.resolve(options.cwd, options.target);
     const { framework, targetStylesEntry, targetTsconfig } = resolveSupportedProjectTarget('trine init', targetRoot, {
@@ -9,10 +9,6 @@ export function planInitProject(options) {
     const updatedFiles = [];
     const reusedFiles = [];
     const warnings = [];
-    const sharedStylesResult = inspectSharedStyleBaseline(targetRoot, 'Trine components');
-    createdFiles.push(...sharedStylesResult.createdFiles);
-    reusedFiles.push(...sharedStylesResult.reusedFiles);
-    warnings.push(...sharedStylesResult.warnings);
     const uiRootResult = inspectUiRootBarrel(targetRoot);
     if (uiRootResult.created) {
         createdFiles.push(uiRootResult.file);
@@ -28,15 +24,16 @@ export function planInitProject(options) {
         reusedFiles.push(tsconfigDisplayPath);
     }
     const stylesDisplayPath = toTargetRelativePath(targetRoot, targetStylesEntry);
-    const stylesResult = inspectStylesImport(targetStylesEntry);
+    const stylesResult = inspectTrineStylesheetBaseline(targetRoot, targetStylesEntry);
     if (stylesResult.needsUpdate) {
         updatedFiles.push(stylesDisplayPath);
     }
     else {
         reusedFiles.push(stylesDisplayPath);
     }
+    warnings.push(...stylesResult.warnings);
     if (stylesResult.authoringImportStillPresent) {
-        warnings.push(`${stylesDisplayPath} still imports @trine/ui/styles/trine.css for a broader authoring baseline outside the local Trine consumer setup.`);
+        warnings.push(`${stylesDisplayPath} keeps the repo-local @trine/ui/styles/trine.css authoring entry so apps/demo can still validate non-localized components during local development.`);
     }
     if (isDemoTarget(targetRoot)) {
         warnings.push('apps/demo keeps a temporary @trine/ui/* bridge for non-localized components so the internal demo app can still build while local Trine source is verified.');
@@ -56,10 +53,9 @@ export function planInitProject(options) {
     };
 }
 export function applyInitPlan(plan, options) {
-    ensureSharedStyleBaseline(plan.targetRoot, 'Trine components');
     ensureUiRootBarrel(plan.targetRoot);
     ensureTsconfigAlias(plan.targetTsconfig, plan.targetRoot, options.cwd);
-    ensureStylesImport(plan.targetStylesEntry);
+    ensureTrineStylesheetBaseline(plan.targetRoot, plan.targetStylesEntry);
     return plan;
 }
 export function initProject(options) {

package/dist/project.js

@@ -1,9 +1,26 @@
-import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync, } from 'node:fs';
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import ts from 'typescript';
-const STYLE_SOURCE_FILES = ['styles/tokens.css', 'styles/trine-consumer.css'];
-const STYLE_IMPORT_LINE = "@import './styles/trine-consumer.css';";
+const TRINE_BASELINE_START_LINE = '/* --- Trine styling baseline: start --- */';
+const TRINE_BASELINE_END_LINE = '/* --- Trine styling baseline: end --- */';
+const TRINE_BASELINE_TEMPLATE_FILE = 'styles/trine-baseline.css';
+const LEGACY_STYLE_IMPORT_LINES = [
+    "@import './styles/trine-consumer.css';",
+    '@import "./styles/trine-consumer.css";',
+];
+const AUTHORING_STYLE_IMPORT_LINES = [
+    "@import '@trine/ui/styles/trine.css';",
+    '@import "@trine/ui/styles/trine.css";',
+];
+const LEGACY_STYLE_FILES = ['src/styles/tokens.css', 'src/styles/trine-consumer.css'];
+const POSTCSS_CONFIG_FILE_NAMES = [
+    '.postcssrc.json',
+    '.postcssrc',
+    'postcss.config.js',
+    'postcss.config.cjs',
+    'postcss.config.mjs',
+];
 const CONVENTIONAL_STYLE_ENTRY_PATHS = ['src/styles.scss', 'src/styles.css', 'src/global.scss'];
 export const TEMPLATE_ROOT = fileURLToPath(new URL('../templates/', import.meta.url));
 const LOCAL_REPO_ROOT = path.resolve(TEMPLATE_ROOT, '../../..');
@@ -62,47 +79,6 @@ export function findAngularAppTargets(root) {
 export function looksLikeAngularAppRoot(root) {
     return inspectProjectTarget(root).framework !== 'unsupported';
 }
-export function ensureSharedStyleBaseline(targetRoot, componentLabel) {
-    const inspection = inspectSharedStyleBaseline(targetRoot, componentLabel);
-    const stylesDestDir = path.join(targetRoot, 'src', 'styles');
-    mkdirSync(stylesDestDir, { recursive: true });
-    for (const sourceFile of STYLE_SOURCE_FILES) {
-        const templatePath = path.join(TEMPLATE_ROOT, sourceFile);
-        const destinationPath = path.join(stylesDestDir, path.basename(sourceFile));
-        if (!inspection.createdFiles.includes(toTargetRelativePath(targetRoot, destinationPath))) {
-            continue;
-        }
-        if (!existsSync(destinationPath)) {
-            copyFileSync(templatePath, destinationPath);
-        }
-    }
-    return inspection;
-}
-export function inspectSharedStyleBaseline(targetRoot, componentLabel) {
-    const stylesDestDir = path.join(targetRoot, 'src', 'styles');
-    const createdFiles = [];
-    const reusedFiles = [];
-    const warnings = [];
-    for (const sourceFile of STYLE_SOURCE_FILES) {
-        const templatePath = path.join(TEMPLATE_ROOT, sourceFile);
-        const destinationPath = path.join(stylesDestDir, path.basename(sourceFile));
-        const relativeDestination = toTargetRelativePath(targetRoot, destinationPath);
-        if (!existsSync(destinationPath)) {
-            createdFiles.push(relativeDestination);
-            continue;
-        }
-        if (readFileSync(destinationPath, 'utf8') !== readFileSync(templatePath, 'utf8')) {
-            warnings.push(`${relativeDestination} already exists and was preserved. Review it manually if the delivered ${componentLabel} expects newer shared styling baseline content.`);
-            continue;
-        }
-        reusedFiles.push(relativeDestination);
-    }
-    return {
-        createdFiles,
-        reusedFiles,
-        warnings,
-    };
-}
 export function ensureUiRootBarrel(targetRoot) {
     const uiRootPath = path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts');
     const inspection = inspectUiRootBarrel(targetRoot);
@@ -181,56 +157,58 @@ export function inspectTsconfigAlias(tsconfigPath, targetRoot, cwd) {
         (Array.isArray(currentWildcardAlias) &&
             currentWildcardAlias.length === 1 &&
             currentWildcardAlias[0] === wildcardTarget);
-    if (aliasIsCurrent && wildcardIsCurrent) {
-        return {
-            needsUpdate: false,
-        };
-    }
     return {
-        needsUpdate: true,
+        needsUpdate: !(aliasIsCurrent && wildcardIsCurrent),
     };
 }
-export function ensureStylesImport(stylesPath) {
-    const inspection = inspectStylesImport(stylesPath);
+export function ensureTrineStylesheetBaseline(targetRoot, stylesPath) {
+    const inspection = inspectTrineStylesheetBaseline(targetRoot, stylesPath);
     if (!inspection.needsUpdate) {
         return {
             updated: false,
             authoringImportStillPresent: inspection.authoringImportStillPresent,
+            warnings: inspection.warnings,
         };
     }
     const current = readFileSync(stylesPath, 'utf8');
-    const lines = current.split('\n');
-    let insertAt = -1;
-    for (let index = 0; index < lines.length; index += 1) {
-        const trimmed = lines[index].trim();
-        if (trimmed.startsWith('@use') || trimmed.startsWith('@import')) {
-            insertAt = index;
-        }
-    }
-    if (insertAt === -1) {
-        lines.unshift(STYLE_IMPORT_LINE, '');
-    }
-    else {
-        lines.splice(insertAt + 1, 0, STYLE_IMPORT_LINE);
-    }
-    writeFileSync(stylesPath, lines.join('\n'));
+    const next = isDemoTarget(targetRoot)
+        ? buildDemoAuthoringStylesheet(current)
+        : buildConsumerInjectedStylesheet(current);
+    writeFileSync(stylesPath, next);
     return {
         updated: true,
-        authoringImportStillPresent: inspection.authoringImportStillPresent,
+        authoringImportStillPresent: isDemoTarget(targetRoot),
+        warnings: inspection.warnings,
     };
 }
-export function inspectStylesImport(stylesPath) {
+export function inspectTrineStylesheetBaseline(targetRoot, stylesPath) {
     const current = readFileSync(stylesPath, 'utf8');
+    const warnings = buildLegacyStyleWarnings(targetRoot);
+    const authoringImportStillPresent = containsExactImportLine(current, AUTHORING_STYLE_IMPORT_LINES);
+    if (isDemoTarget(targetRoot)) {
+        return {
+            needsUpdate: containsManagedBlock(current) ||
+                containsExactImportLine(current, LEGACY_STYLE_IMPORT_LINES) ||
+                !authoringImportStillPresent,
+            authoringImportStillPresent,
+            warnings,
+        };
+    }
+    const managedBlock = extractManagedBlock(current);
+    const expectedManagedBlock = buildManagedStylesheetBlock();
+    const hasLegacyImports = containsExactImportLine(current, LEGACY_STYLE_IMPORT_LINES) || authoringImportStillPresent;
+    const hasDuplicateTailwindImport = hasTailwindImportOutsideManagedBlock(current);
     return {
-        needsUpdate: !current.includes(STYLE_IMPORT_LINE),
-        authoringImportStillPresent: current.includes("@import '@trine/ui/styles/trine.css';"),
+        needsUpdate: managedBlock !== expectedManagedBlock || hasLegacyImports || hasDuplicateTailwindImport,
+        authoringImportStillPresent,
+        warnings,
     };
 }
 export function readTargetDependencyWarnings(targetRoot, componentLabel) {
     const packageJsonPath = findNearestFileUpward(targetRoot, 'package.json');
     if (!packageJsonPath) {
         return [
-            'No package.json was found at or above the target root, so Tailwind CSS v4 and class-variance-authority prerequisites could not be checked automatically.',
+            'No package.json was found at or above the target root, so Tailwind CSS v4, PostCSS, and class-variance-authority prerequisites could not be checked automatically.',
         ];
     }
     try {
@@ -250,11 +228,21 @@ export function readTargetDependencyWarnings(targetRoot, componentLabel) {
         else if (!looksLikeTailwindV4(tailwindRange)) {
             warnings.push(`The target repo declares tailwindcss@${tailwindRange}. The current proven ${componentLabel} baseline expects Tailwind CSS v4.`);
         }
+        if (!deps['@tailwindcss/postcss']) {
+            warnings.push(`@tailwindcss/postcss is missing from the target repo. The current proven ${componentLabel} baseline expects it for Tailwind CSS v4 processing.`);
+        }
+        if (!deps['postcss']) {
+            warnings.push(`postcss is missing from the target repo. The current proven ${componentLabel} baseline expects it for Tailwind CSS v4 processing.`);
+        }
+        const postcssConfigPath = findNearestPostcssConfigPath(targetRoot);
+        if (!postcssConfigPath) {
+            warnings.push('No PostCSS config was found at or above the target root. The current proven baseline expects a PostCSS config that enables @tailwindcss/postcss.');
+        }
         return warnings;
     }
     catch {
         return [
-            `package.json could not be parsed for dependency checks. Verify Tailwind CSS v4 and class-variance-authority manually before building the delivered ${componentLabel}.`,
+            `package.json could not be parsed for dependency checks. Verify Tailwind CSS v4, PostCSS, and class-variance-authority manually before building the delivered ${componentLabel}.`,
         ];
     }
 }
@@ -403,6 +391,15 @@ function findFilesUpward(startDir, fileName) {
 function findNearestFileUpward(startDir, fileName) {
     return findFilesUpward(startDir, fileName)[0];
 }
+function findNearestPostcssConfigPath(startDir) {
+    for (const fileName of POSTCSS_CONFIG_FILE_NAMES) {
+        const match = findNearestFileUpward(startDir, fileName);
+        if (match) {
+            return match;
+        }
+    }
+    return undefined;
+}
 function looksLikeTailwindV4(range) {
     const versionTokenPattern = /(?:^|[<>=~^|\s:])v?(\d+)(?:(?:\.\d+){0,2})/g;
     return [...range.matchAll(versionTokenPattern)].some((match) => Number(match[1]) === 4);
@@ -427,18 +424,46 @@ function resolveStylesEntrySelection(targetRoot, candidates, preferredStylesEntr
             };
         }
     }
-    const trineOwnedCandidates = candidates.filter((candidate) => {
+    const managedBlockCandidates = candidates.filter((candidate) => {
+        try {
+            return containsManagedBlock(readFileSync(candidate, 'utf8'));
+        }
+        catch {
+            return false;
+        }
+    });
+    if (managedBlockCandidates.length === 1) {
+        return {
+            targetStylesEntry: managedBlockCandidates[0],
+            targetStylesEntryResolution: 'managed-block',
+        };
+    }
+    const legacyImportCandidates = candidates.filter((candidate) => {
         try {
-            return readFileSync(candidate, 'utf8').includes(STYLE_IMPORT_LINE);
+            return containsExactImportLine(readFileSync(candidate, 'utf8'), LEGACY_STYLE_IMPORT_LINES);
         }
         catch {
             return false;
         }
     });
-    if (trineOwnedCandidates.length === 1) {
+    if (legacyImportCandidates.length === 1) {
         return {
-            targetStylesEntry: trineOwnedCandidates[0],
-            targetStylesEntryResolution: 'trine-import',
+            targetStylesEntry: legacyImportCandidates[0],
+            targetStylesEntryResolution: 'legacy-import',
+        };
+    }
+    const authoringImportCandidates = candidates.filter((candidate) => {
+        try {
+            return containsExactImportLine(readFileSync(candidate, 'utf8'), AUTHORING_STYLE_IMPORT_LINES);
+        }
+        catch {
+            return false;
+        }
+    });
+    if (authoringImportCandidates.length === 1) {
+        return {
+            targetStylesEntry: authoringImportCandidates[0],
+            targetStylesEntryResolution: 'authoring-import',
         };
     }
     if (candidates.length > 0) {
@@ -452,3 +477,112 @@ function resolveStylesEntrySelection(targetRoot, candidates, preferredStylesEntr
         targetStylesEntryResolution: 'none',
     };
 }
+function buildManagedStylesheetBlock() {
+    const templatePath = path.join(TEMPLATE_ROOT, TRINE_BASELINE_TEMPLATE_FILE);
+    const templateContent = readFileSync(templatePath, 'utf8').trimEnd();
+    return `${TRINE_BASELINE_START_LINE}\n${templateContent}\n${TRINE_BASELINE_END_LINE}`;
+}
+function containsManagedBlock(current) {
+    return current.includes(TRINE_BASELINE_START_LINE) && current.includes(TRINE_BASELINE_END_LINE);
+}
+function extractManagedBlock(current) {
+    const match = current.match(new RegExp(`${escapeRegExp(TRINE_BASELINE_START_LINE)}[\\s\\S]*?${escapeRegExp(TRINE_BASELINE_END_LINE)}`));
+    return match?.[0];
+}
+function stripManagedBlock(current) {
+    return current.replace(new RegExp(`\\n?${escapeRegExp(TRINE_BASELINE_START_LINE)}[\\s\\S]*?${escapeRegExp(TRINE_BASELINE_END_LINE)}\\n?`, 'g'), '\n');
+}
+function buildConsumerInjectedStylesheet(current) {
+    const withoutManagedBlock = stripManagedBlock(current);
+    const withoutLegacyImports = removeExactImportLines(removeExactImportLines(withoutManagedBlock, LEGACY_STYLE_IMPORT_LINES), AUTHORING_STYLE_IMPORT_LINES);
+    const withoutTailwindImports = removeTailwindImports(withoutLegacyImports);
+    return insertManagedBlock(withoutTailwindImports, buildManagedStylesheetBlock());
+}
+function buildDemoAuthoringStylesheet(current) {
+    const withoutManagedBlock = stripManagedBlock(current);
+    const withoutLegacyImports = removeExactImportLines(withoutManagedBlock, LEGACY_STYLE_IMPORT_LINES);
+    if (containsExactImportLine(withoutLegacyImports, AUTHORING_STYLE_IMPORT_LINES)) {
+        return normalizeStylesheetText(withoutLegacyImports);
+    }
+    return insertManagedBlock(withoutLegacyImports, AUTHORING_STYLE_IMPORT_LINES[0]);
+}
+function removeExactImportLines(current, importsToRemove) {
+    return current
+        .split('\n')
+        .filter((line) => !importsToRemove.includes(line.trim()))
+        .join('\n');
+}
+function removeTailwindImports(current) {
+    return current
+        .split('\n')
+        .filter((line) => !isTailwindImportLine(line.trim()))
+        .join('\n');
+}
+function containsExactImportLine(current, candidates) {
+    return current.split('\n').some((line) => candidates.includes(line.trim()));
+}
+function hasTailwindImportOutsideManagedBlock(current) {
+    return stripManagedBlock(current)
+        .split('\n')
+        .some((line) => isTailwindImportLine(line.trim()));
+}
+function isTailwindImportLine(line) {
+    return (line === "@import 'tailwindcss';" ||
+        line === '@import "tailwindcss";' ||
+        line === "@import url('tailwindcss');" ||
+        line === '@import url("tailwindcss");');
+}
+function insertManagedBlock(current, block) {
+    const normalized = normalizeStylesheetText(current);
+    if (normalized.trim() === '') {
+        return `${block}\n`;
+    }
+    const lines = normalized.split('\n');
+    let insertAt = 0;
+    for (let index = 0; index < lines.length; index += 1) {
+        const trimmed = lines[index].trim();
+        if (isPreludeLine(trimmed)) {
+            insertAt = index + 1;
+            continue;
+        }
+        break;
+    }
+    const before = lines.slice(0, insertAt).join('\n').trimEnd();
+    const after = lines.slice(insertAt).join('\n').trimStart();
+    return joinSections(before, block, after);
+}
+function joinSections(...sections) {
+    const populatedSections = sections.filter((section) => section.trim() !== '');
+    if (populatedSections.length === 0) {
+        return '\n';
+    }
+    return `${populatedSections.join('\n\n').trimEnd()}\n`;
+}
+function isPreludeLine(trimmedLine) {
+    return (trimmedLine === '' ||
+        trimmedLine.startsWith('//') ||
+        trimmedLine.startsWith('/*') ||
+        trimmedLine.startsWith('*') ||
+        trimmedLine.startsWith('*/') ||
+        trimmedLine.startsWith('@charset') ||
+        trimmedLine.startsWith('@use') ||
+        trimmedLine.startsWith('@forward') ||
+        trimmedLine.startsWith('@import'));
+}
+function normalizeStylesheetText(current) {
+    return current
+        .replace(/\r\n/g, '\n')
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+}
+function buildLegacyStyleWarnings(targetRoot) {
+    return listLegacyStyleFiles(targetRoot).map((file) => `${file} still exists from the older separate-file Trine baseline. The injected global stylesheet model no longer requires it, so remove it manually when you no longer need it.`);
+}
+function listLegacyStyleFiles(targetRoot) {
+    return LEGACY_STYLE_FILES.map((relativePath) => path.join(targetRoot, relativePath))
+        .filter((filePath) => existsSync(filePath))
+        .map((filePath) => toTargetRelativePath(targetRoot, filePath));
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trineui/cli",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Copy-paste ownership CLI for Trine UI components.",
   "main": "./dist/index.js",

package/templates/button/button.skin.ts

@@ -7,47 +7,47 @@ export const buttonSkin = cva(
     'font-medium leading-none',
     'select-none',
     '[&:has(>.sr-only)]:gap-0 [&:has(>.sr-only)]:px-0',
-    'rounded-[var(--trine-radius-md)] border',
-    'transition-[background-color,border-color,color,box-shadow,transform] duration-[var(--trine-duration-base)] ease-[var(--trine-ease-default)]',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--trine-color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--trine-color-bg)]',
-    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-[var(--trine-color-text-disabled)] disabled:shadow-none',
+    'rounded-md border',
+    'transition-[background-color,border-color,color,box-shadow,transform] duration-[var(--duration-base)] ease-[var(--ease-default)]',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-muted-foreground disabled:shadow-none',
   ],
   {
     variants: {
       variant: {
         primary: [
-          'bg-[var(--trine-color-primary-default)]',
-          'border-[var(--trine-color-primary-default)]',
-          'text-[var(--trine-color-primary-fg)]',
-          'shadow-[var(--trine-shadow-sm)]',
-          'hover:bg-[var(--trine-color-primary-hover)] hover:border-[var(--trine-color-primary-hover)]',
-          'active:bg-[var(--trine-color-primary-active)] active:border-[var(--trine-color-primary-active)] active:translate-y-px active:shadow-none',
-          'disabled:border-[var(--trine-color-primary-subtle)] disabled:bg-[var(--trine-color-primary-subtle)]',
+          'bg-primary',
+          'border-primary',
+          'text-primary-foreground',
+          'shadow-[var(--shadow-sm)]',
+          'hover:bg-primary-hover hover:border-primary-hover',
+          'active:bg-primary-active active:border-primary-active active:translate-y-px active:shadow-none',
+          'disabled:border-primary-subtle disabled:bg-primary-subtle',
         ],
         secondary: [
-          'bg-[var(--trine-color-neutral-subtle)]',
-          'border-[var(--trine-color-border)]',
-          'text-[var(--trine-color-text)]',
-          'hover:bg-[var(--trine-color-neutral-hover)] hover:border-[var(--trine-color-border-strong)]',
-          'active:bg-[var(--trine-color-neutral-active)] active:border-[var(--trine-color-border-strong)] active:translate-y-px',
-          'disabled:border-[var(--trine-color-border)] disabled:bg-[var(--trine-color-neutral-subtle)]',
+          'bg-secondary',
+          'border-border',
+          'text-secondary-foreground',
+          'hover:bg-secondary-hover hover:border-border-strong',
+          'active:bg-secondary-active active:border-border-strong active:translate-y-px',
+          'disabled:border-border disabled:bg-muted',
         ],
         ghost: [
           'bg-transparent',
           'border-transparent',
-          'text-[var(--trine-color-primary-default)]',
-          'hover:bg-[var(--trine-color-primary-subtle)] hover:text-[var(--trine-color-primary-hover)]',
-          'active:bg-[var(--trine-color-primary-subtle)] active:text-[var(--trine-color-primary-active)] active:translate-y-px',
-          'disabled:bg-transparent disabled:border-transparent disabled:text-[var(--trine-color-text-disabled)]',
+          'text-primary',
+          'hover:bg-accent hover:text-accent-foreground',
+          'active:bg-accent active:text-accent-foreground active:translate-y-px',
+          'disabled:bg-transparent disabled:border-transparent',
         ],
         danger: [
-          'bg-[var(--trine-color-danger-default)]',
-          'border-[var(--trine-color-danger-default)]',
-          'text-[var(--trine-color-danger-fg)]',
-          'shadow-[var(--trine-shadow-sm)]',
-          'hover:bg-[var(--trine-color-danger-hover)] hover:border-[var(--trine-color-danger-hover)]',
-          'active:bg-[var(--trine-color-danger-active)] active:border-[var(--trine-color-danger-active)] active:translate-y-px active:shadow-none',
-          'disabled:border-[var(--trine-color-danger-subtle)] disabled:bg-[var(--trine-color-danger-subtle)]',
+          'bg-destructive',
+          'border-destructive',
+          'text-destructive-foreground',
+          'shadow-[var(--shadow-sm)]',
+          'hover:bg-destructive-hover hover:border-destructive-hover',
+          'active:bg-destructive-active active:border-destructive-active active:translate-y-px active:shadow-none',
+          'disabled:border-destructive-subtle disabled:bg-destructive-subtle',
         ],
       },
       size: {
@@ -65,19 +65,19 @@ export const buttonSkin = cva(
         variant: 'primary',
         loading: true,
         class: [
-          '[&[aria-busy=true]]:border-[var(--trine-color-primary-default)]',
-          '[&[aria-busy=true]]:bg-[var(--trine-color-primary-default)]',
-          '[&[aria-busy=true]]:text-[var(--trine-color-primary-fg)]',
-          '[&[aria-busy=true]]:shadow-[var(--trine-shadow-sm)]',
+          '[&[aria-busy=true]]:border-primary',
+          '[&[aria-busy=true]]:bg-primary',
+          '[&[aria-busy=true]]:text-primary-foreground',
+          '[&[aria-busy=true]]:shadow-[var(--shadow-sm)]',
         ],
       },
       {
         variant: 'secondary',
         loading: true,
         class: [
-          '[&[aria-busy=true]]:border-[var(--trine-color-border)]',
-          '[&[aria-busy=true]]:bg-[var(--trine-color-neutral-subtle)]',
-          '[&[aria-busy=true]]:text-[var(--trine-color-text)]',
+          '[&[aria-busy=true]]:border-border',
+          '[&[aria-busy=true]]:bg-secondary',
+          '[&[aria-busy=true]]:text-secondary-foreground',
         ],
       },
       {
@@ -85,18 +85,18 @@ export const buttonSkin = cva(
         loading: true,
         class: [
           '[&[aria-busy=true]]:border-transparent',
-          '[&[aria-busy=true]]:bg-[var(--trine-color-primary-subtle)]',
-          '[&[aria-busy=true]]:text-[var(--trine-color-primary-default)]',
+          '[&[aria-busy=true]]:bg-accent',
+          '[&[aria-busy=true]]:text-accent-foreground',
         ],
       },
       {
         variant: 'danger',
         loading: true,
         class: [
-          '[&[aria-busy=true]]:border-[var(--trine-color-danger-default)]',
-          '[&[aria-busy=true]]:bg-[var(--trine-color-danger-default)]',
-          '[&[aria-busy=true]]:text-[var(--trine-color-danger-fg)]',
-          '[&[aria-busy=true]]:shadow-[var(--trine-shadow-sm)]',
+          '[&[aria-busy=true]]:border-destructive',
+          '[&[aria-busy=true]]:bg-destructive',
+          '[&[aria-busy=true]]:text-destructive-foreground',
+          '[&[aria-busy=true]]:shadow-[var(--shadow-sm)]',
         ],
       },
     ],

package/templates/styles/trine-baseline.css

@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-primary-subtle: var(--primary-subtle);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-secondary-active: var(--secondary-active);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-destructive-active: var(--destructive-active);
+  --color-destructive-subtle: var(--destructive-subtle);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --background: oklch(0.9702 0.0015 253.83);
+  --foreground: oklch(0.2103 0.0015 253.83);
+
+  --card: oklch(1 0.0008 253.83);
+  --card-foreground: oklch(0.2103 0.0015 253.83);
+
+  --popover: oklch(1 0.0004 253.83 / 0.82);
+  --popover-foreground: oklch(0.2103 0.0015 253.83);
+
+  --primary: oklch(0.6204 0.195 253.83);
+  --primary-foreground: oklch(0.9911 0 0);
+  --primary-hover: oklch(0.5804 0.195 253.83);
+  --primary-active: oklch(0.5404 0.195 253.83);
+  --primary-subtle: oklch(0.9524 0.02 253.83);
+
+  --secondary: oklch(0.94 0.0015 253.83);
+  --secondary-foreground: oklch(0.2103 0.0015 253.83);
+  --secondary-hover: oklch(0.9373 0.0012 253.83);
+  --secondary-active: oklch(0.92 0.0015 253.83);
+
+  --muted: oklch(0.94 0.0015 253.83);
+  --muted-foreground: oklch(0.5517 0.003 253.83);
+
+  --accent: oklch(0.9524 0.02 253.83);
+  --accent-foreground: oklch(0.6204 0.195 253.83);
+
+  --destructive: oklch(0.6532 0.2335 25.74);
+  --destructive-foreground: oklch(0.9911 0 0);
+  --destructive-hover: oklch(0.6132 0.2335 25.74);
+  --destructive-active: oklch(0.5732 0.2335 25.74);
+  --destructive-subtle: oklch(0.9524 0.025 25.74);
+
+  --border: oklch(0.9 0.0015 253.83);
+  --border-strong: oklch(0.871 0.0015 253.83);
+  --input: oklch(0.9 0.0015 253.83);
+  --ring: oklch(0.6204 0.195 253.83);
+
+  --radius: 0.5rem;
+
+  --shadow-sm: 0 1px 2px 0 oklch(0.16 0.01 258 / 0.12);
+  --shadow-md: 0 10px 20px -10px oklch(0.16 0.01 258 / 0.22);
+  --shadow-lg: 0 20px 40px -20px oklch(0.16 0.01 258 / 0.28);
+
+  --duration-fast: 120ms;
+  --duration-base: 180ms;
+  --duration-slow: 280ms;
+  --ease-default: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.dark {
+  --background: oklch(0.12 0.0015 253.83);
+  --foreground: oklch(0.9911 0.0015 253.83);
+
+  --card: oklch(0.2103 0.003 253.83);
+  --card-foreground: oklch(0.9911 0.0015 253.83);
+
+  --popover: oklch(0.2103 0.003 253.83 / 0.82);
+  --popover-foreground: oklch(0.9911 0.0015 253.83);
+
+  --primary: oklch(0.6204 0.195 253.83);
+  --primary-foreground: oklch(0.9911 0 0);
+  --primary-hover: oklch(0.6704 0.195 253.83);
+  --primary-active: oklch(0.5804 0.195 253.83);
+  --primary-subtle: oklch(0.274 0.02 253.83);
+
+  --secondary: oklch(0.274 0.0015 253.83);
+  --secondary-foreground: oklch(0.9911 0.0015 253.83);
+  --secondary-hover: oklch(0.3964 0.0015 253.83);
+  --secondary-active: oklch(0.257 0.0023 253.83);
+
+  --muted: oklch(0.274 0.0015 253.83);
+  --muted-foreground: oklch(0.705 0.003 253.83);
+
+  --accent: oklch(0.274 0.02 253.83);
+  --accent-foreground: oklch(0.6204 0.195 253.83);
+
+  --destructive: oklch(0.594 0.1973 24.63);
+  --destructive-foreground: oklch(0.9911 0 0);
+  --destructive-hover: oklch(0.634 0.1973 24.63);
+  --destructive-active: oklch(0.554 0.1973 24.63);
+  --destructive-subtle: oklch(0.257 0.02 24.63);
+
+  --border: oklch(0.28 0.0015 253.83);
+  --border-strong: oklch(0.3964 0.0015 253.83);
+  --input: oklch(0.28 0.0015 253.83);
+  --ring: oklch(0.6204 0.195 253.83);
+}

package/templates/styles/tokens.css

@@ -1,102 +0,0 @@
-:root {
-  --trine-color-primary-default: oklch(0.6204 0.195 253.83);
-  --trine-color-primary-hover: oklch(0.5804 0.195 253.83);
-  --trine-color-primary-active: oklch(0.5404 0.195 253.83);
-  --trine-color-primary-subtle: oklch(0.9524 0.02 253.83);
-  --trine-color-primary-fg: oklch(0.9911 0 0);
-
-  --trine-color-danger-default: oklch(0.6532 0.2335 25.74);
-  --trine-color-danger-hover: oklch(0.6132 0.2335 25.74);
-  --trine-color-danger-active: oklch(0.5732 0.2335 25.74);
-  --trine-color-danger-subtle: oklch(0.9524 0.025 25.74);
-  --trine-color-danger-fg: oklch(0.9911 0 0);
-
-  --trine-color-success-default: oklch(0.7329 0.1941 150.81);
-  --trine-color-success-hover: oklch(0.6929 0.1941 150.81);
-  --trine-color-success-active: oklch(0.6529 0.1941 150.81);
-  --trine-color-success-subtle: oklch(0.9524 0.02 150.81);
-  --trine-color-success-fg: oklch(0.2103 0.0059 150.81);
-
-  --trine-color-warning-default: oklch(0.7819 0.159 72.33);
-  --trine-color-warning-hover: oklch(0.7419 0.159 72.33);
-  --trine-color-warning-active: oklch(0.7019 0.159 72.33);
-  --trine-color-warning-subtle: oklch(0.9524 0.02 72.33);
-  --trine-color-warning-fg: oklch(0.2103 0.0059 72.33);
-
-  --trine-color-neutral-default: oklch(0.5517 0.003 253.83);
-  --trine-color-neutral-hover: oklch(0.9373 0.0012 253.83);
-  --trine-color-neutral-active: oklch(0.92 0.0015 253.83);
-  --trine-color-neutral-subtle: oklch(0.94 0.0015 253.83);
-  --trine-color-neutral-fg: oklch(0.2103 0.0059 253.83);
-
-  --trine-color-bg: oklch(0.9702 0.0015 253.83);
-  --trine-color-bg-elevated: oklch(1 0.0008 253.83);
-  --trine-color-bg-overlay: oklch(1 0.0004 253.83 / 0.82);
-  --trine-color-border: oklch(0.9 0.0015 253.83);
-  --trine-color-border-strong: oklch(0.871 0.0015 253.83);
-  --trine-color-ring: oklch(0.6204 0.195 253.83);
-  --trine-color-text: oklch(0.2103 0.0015 253.83);
-  --trine-color-text-subtle: oklch(0.5517 0.003 253.83);
-  --trine-color-text-disabled: oklch(0.5517 0.003 253.83);
-
-  --trine-radius-none: 0;
-  --trine-radius-sm: 0.375rem;
-  --trine-radius-md: 0.5rem;
-  --trine-radius-lg: 0.75rem;
-  --trine-radius-xl: 1rem;
-  --trine-radius-2xl: 1.25rem;
-  --trine-radius-full: 9999px;
-
-  --trine-shadow-sm: 0 1px 2px 0 oklch(0.16 0.01 258 / 0.12);
-  --trine-shadow-md: 0 10px 20px -10px oklch(0.16 0.01 258 / 0.22);
-  --trine-shadow-lg: 0 20px 40px -20px oklch(0.16 0.01 258 / 0.28);
-
-  --trine-duration-fast: 120ms;
-  --trine-duration-base: 180ms;
-  --trine-duration-slow: 280ms;
-  --trine-ease-default: cubic-bezier(0.2, 0, 0, 1);
-  --trine-ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --trine-ease-out: cubic-bezier(0, 0, 0.2, 1);
-}
-
-html.dark {
-  --trine-color-primary-default: oklch(0.6204 0.195 253.83);
-  --trine-color-primary-hover: oklch(0.6704 0.195 253.83);
-  --trine-color-primary-active: oklch(0.5804 0.195 253.83);
-  --trine-color-primary-subtle: oklch(0.274 0.02 253.83);
-  --trine-color-primary-fg: oklch(0.9911 0 0);
-
-  --trine-color-danger-default: oklch(0.594 0.1973 24.63);
-  --trine-color-danger-hover: oklch(0.634 0.1973 24.63);
-  --trine-color-danger-active: oklch(0.554 0.1973 24.63);
-  --trine-color-danger-subtle: oklch(0.257 0.02 24.63);
-  --trine-color-danger-fg: oklch(0.9911 0 0);
-
-  --trine-color-success-default: oklch(0.7329 0.1941 150.81);
-  --trine-color-success-hover: oklch(0.7729 0.1941 150.81);
-  --trine-color-success-active: oklch(0.6929 0.1941 150.81);
-  --trine-color-success-subtle: oklch(0.257 0.02 150.81);
-  --trine-color-success-fg: oklch(0.2103 0.0059 150.81);
-
-  --trine-color-warning-default: oklch(0.8203 0.1392 76.34);
-  --trine-color-warning-hover: oklch(0.8603 0.1392 76.34);
-  --trine-color-warning-active: oklch(0.7803 0.1392 76.34);
-  --trine-color-warning-subtle: oklch(0.2721 0.02 76.34);
-  --trine-color-warning-fg: oklch(0.2103 0.0059 76.34);
-
-  --trine-color-neutral-default: oklch(0.705 0.003 253.83);
-  --trine-color-neutral-hover: oklch(0.3964 0.0015 253.83);
-  --trine-color-neutral-active: oklch(0.257 0.0023 253.83);
-  --trine-color-neutral-subtle: oklch(0.274 0.0015 253.83);
-  --trine-color-neutral-fg: oklch(0.9911 0.0015 253.83);
-
-  --trine-color-bg: oklch(0.12 0.0015 253.83);
-  --trine-color-bg-elevated: oklch(0.2103 0.003 253.83);
-  --trine-color-bg-overlay: oklch(0.2103 0.003 253.83 / 0.82);
-  --trine-color-border: oklch(0.28 0.0015 253.83);
-  --trine-color-border-strong: oklch(0.3964 0.0015 253.83);
-  --trine-color-ring: oklch(0.6204 0.195 253.83);
-  --trine-color-text: oklch(0.9911 0.0015 253.83);
-  --trine-color-text-subtle: oklch(0.705 0.003 253.83);
-  --trine-color-text-disabled: oklch(0.705 0.003 253.83);
-}

package/templates/styles/trine-consumer.css

@@ -1,58 +0,0 @@
-/* Consumer-safe styling/bootstrap baseline for copy-paste ownership delivery. */
-@import './tokens.css';
-@import 'tailwindcss';
-
-@source '../app';
-
-@theme {
-  --color-trine-primary: var(--trine-color-primary-default);
-  --color-trine-primary-hover: var(--trine-color-primary-hover);
-  --color-trine-primary-active: var(--trine-color-primary-active);
-  --color-trine-primary-subtle: var(--trine-color-primary-subtle);
-  --color-trine-primary-fg: var(--trine-color-primary-fg);
-
-  --color-trine-danger: var(--trine-color-danger-default);
-  --color-trine-danger-hover: var(--trine-color-danger-hover);
-  --color-trine-danger-active: var(--trine-color-danger-active);
-  --color-trine-danger-subtle: var(--trine-color-danger-subtle);
-  --color-trine-danger-fg: var(--trine-color-danger-fg);
-
-  --color-trine-success: var(--trine-color-success-default);
-  --color-trine-success-hover: var(--trine-color-success-hover);
-  --color-trine-success-active: var(--trine-color-success-active);
-  --color-trine-success-subtle: var(--trine-color-success-subtle);
-  --color-trine-success-fg: var(--trine-color-success-fg);
-
-  --color-trine-warning: var(--trine-color-warning-default);
-  --color-trine-warning-hover: var(--trine-color-warning-hover);
-  --color-trine-warning-active: var(--trine-color-warning-active);
-  --color-trine-warning-subtle: var(--trine-color-warning-subtle);
-  --color-trine-warning-fg: var(--trine-color-warning-fg);
-
-  --color-trine-neutral: var(--trine-color-neutral-default);
-  --color-trine-neutral-hover: var(--trine-color-neutral-hover);
-  --color-trine-neutral-active: var(--trine-color-neutral-active);
-  --color-trine-neutral-subtle: var(--trine-color-neutral-subtle);
-  --color-trine-neutral-fg: var(--trine-color-neutral-fg);
-
-  --color-trine-bg: var(--trine-color-bg);
-  --color-trine-bg-elevated: var(--trine-color-bg-elevated);
-  --color-trine-bg-overlay: var(--trine-color-bg-overlay);
-  --color-trine-border: var(--trine-color-border);
-  --color-trine-border-strong: var(--trine-color-border-strong);
-  --color-trine-text: var(--trine-color-text);
-  --color-trine-text-subtle: var(--trine-color-text-subtle);
-  --color-trine-text-disabled: var(--trine-color-text-disabled);
-
-  --radius-trine-none: var(--trine-radius-none);
-  --radius-trine-sm: var(--trine-radius-sm);
-  --radius-trine-md: var(--trine-radius-md);
-  --radius-trine-lg: var(--trine-radius-lg);
-  --radius-trine-xl: var(--trine-radius-xl);
-  --radius-trine-2xl: var(--trine-radius-2xl);
-  --radius-trine-full: var(--trine-radius-full);
-
-  --shadow-trine-sm: var(--trine-shadow-sm);
-  --shadow-trine-md: var(--trine-shadow-md);
-  --shadow-trine-lg: var(--trine-shadow-lg);
-}