@pitlane/theme 0.1.0 → 0.3.0

package/dist/theme-CMaWrQJ5.mjs

@@ -0,0 +1,237 @@
+import { C as assertNoStringReference, E as mentionedVarNames, S as ThemeError, T as kebabSegment, _ as selfSchema, a as childSchema, h as pathKey, p as isTokenSchema, w as collectTokens, x as serializeValue } from "./schema-JmfNnMzr.mjs";
+import { createElement } from "remix/ui";
+import { createSchema, fail, object, parse } from "remix/data-schema";
+//#region src/validate.ts
+/**
+* Composes the sparse schema tree and the token tree into one
+* `remix/data-schema` object schema, so a single `parse` validates
+* every token and reports each failure with its own path.
+*
+* A token with no schema entry gets a schema that always fails, so a
+* missing declaration is reported alongside any bad values rather than
+* short-circuiting them.
+*
+* @internal
+*/
+function composeSchema(tokens, schema) {
+	return compose(tokens, schema, void 0);
+}
+function compose(tokens, schema, inherited) {
+	let shape = {};
+	for (let [key, value] of Object.entries(tokens)) {
+		let child = childSchema(schema, key);
+		let own = selfSchema(child) ?? inherited;
+		if (typeof value === "object" && value !== null && !Array.isArray(value)) shape[key] = compose(value, child, own);
+		else if (own === void 0) shape[key] = createSchema((_, context) => fail(`"${pathKey(context.path)}" has no schema entry`, context.path));
+		else shape[key] = own;
+	}
+	return object(shape);
+}
+//#endregion
+//#region src/theme.ts
+const REF_RE = /^var\((--[a-z0-9-]+)\)$/;
+function createTheme(input) {
+	return compile(typeof input === "function" ? input.$theme : input);
+}
+function compile(init) {
+	parse(composeSchema(init.tokens, init.schema), init.tokens, { abortEarly: false });
+	let entries = collectTokens(init.tokens, init.schema);
+	let byKey = new Map(entries.map((entry) => [entry.key, entry]));
+	let byVarName = new Map(entries.map((entry) => [entry.varName, entry]));
+	let ctx = referenceContext(byKey);
+	let cssText = buildCssText(entries.map((entry) => [entry.varName, declare(entry, ctx)]), modeBlocks(init.modes, byKey, ctx));
+	return {
+		cssText,
+		token: buildAccessor(entries),
+		Theme: createThemeComponent(cssText, init),
+		raw(ref) {
+			return resolveRaw(ref, byVarName, byKey, []);
+		},
+		extend(patch) {
+			let accessor = buildAccessor(entries);
+			let next = typeof patch === "function" ? patch(accessor) : patch;
+			return compile({
+				schema: mergeDeep(init.schema, next.schema ?? {}),
+				tokens: mergeDeep(init.tokens, next.tokens),
+				modes: {
+					...init.modes,
+					...next.modes
+				}
+			});
+		},
+		select(projection) {
+			let next = projection(buildAccessor(entries));
+			let projected = reroot(next.tokens, byVarName);
+			assertNoDroppedReferences(projected, byVarName);
+			return compile({
+				schema: next.schema,
+				tokens: projected,
+				modes: next.modes
+			});
+		}
+	};
+}
+function referenceContext(byKey) {
+	return { varRefFor(key, from, expected) {
+		let target = byKey.get(key);
+		if (target === void 0) throw new ThemeError(`"${from}" references unknown token "${key}"`);
+		if (target.kind === "untyped") throw new ThemeError(`"${from}" references untyped token "${key}"`);
+		let type = target.kind === "scale" ? "dimension" : target.type;
+		if (type !== expected) throw new ThemeError(`"${from}" references "${key}" of type "${type}" where "${expected}" is required`);
+		return `var(${target.varName})`;
+	} };
+}
+function declare(entry, ctx) {
+	if (entry.kind === "untyped") return entry.value;
+	if (entry.kind === "scale") return serializeValue("dimension", entry.value, ctx, entry.key);
+	if (entry.aliasOf !== void 0) return ctx.varRefFor(entry.aliasOf, entry.key, entry.type);
+	return serializeValue(entry.type, entry.value, ctx, entry.key);
+}
+function modeBlocks(modes, byKey, ctx) {
+	if (modes === void 0) return [];
+	let selectorBlocks = [];
+	let mediaBlocks = [];
+	for (let [name, mode] of Object.entries(modes)) {
+		let overrides = [];
+		walkMode(mode.tokens, [], name, byKey, ctx, overrides);
+		if (overrides.length === 0) continue;
+		if (mode.selector !== void 0) {
+			let lines = overrides.map(([varName, value]) => `    ${varName}: ${value};`);
+			selectorBlocks.push(`${mode.selector} {\n${lines.join("\n")}\n}`);
+		}
+		let media = mode.media ?? `(prefers-color-scheme: ${name})`;
+		let lines = overrides.map(([varName, value]) => `        ${varName}: ${value};`);
+		mediaBlocks.push(`@media ${media} {\n    :root {\n${lines.join("\n")}\n    }\n}`);
+	}
+	return [...selectorBlocks, ...mediaBlocks];
+}
+function walkMode(node, path, mode, byKey, ctx, out) {
+	if (typeof node !== "object" || node === null || Array.isArray(node)) throw new ThemeError(`Mode "${mode}" override at "${path.join(".")}" is not a group`);
+	for (let [key, value] of Object.entries(node)) {
+		let childPath = [...path, key];
+		let childKey = childPath.join(".");
+		let entry = byKey.get(childKey);
+		if (entry === void 0) {
+			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+				walkMode(value, childPath, mode, byKey, ctx, out);
+				continue;
+			}
+			throw new ThemeError(`Mode "${mode}" overrides unknown token "${childKey}"`);
+		}
+		if (entry.kind === "untyped") {
+			out.push([entry.varName, String(value)]);
+			continue;
+		}
+		assertNoStringReference(value, childKey);
+		let type = entry.kind === "scale" ? "dimension" : entry.type;
+		out.push([entry.varName, serializeValue(type, value, ctx, childKey)]);
+	}
+}
+function resolveRaw(ref, byVarName, byKey, chain) {
+	let match = REF_RE.exec(ref);
+	let entry = match === null ? void 0 : byVarName.get(match[1]);
+	if (entry === void 0) throw new ThemeError(`"${ref}" was not minted by this theme`);
+	if (chain.includes(entry.key)) throw new ThemeError(`Reference cycle: ${[...chain, entry.key].join(" → ")}`);
+	if (entry.kind === "typed" && entry.aliasOf !== void 0) {
+		let target = byKey.get(entry.aliasOf);
+		if (target === void 0) throw new ThemeError(`"${entry.key}" references unknown token "${entry.aliasOf}"`);
+		return resolveRaw(`var(${target.varName})`, byVarName, byKey, [...chain, entry.key]);
+	}
+	if (entry.kind === "untyped") return entry.value;
+	return serializeValue(entry.kind === "scale" ? "dimension" : entry.type, entry.value, { varRefFor: (key, from, expected) => {
+		let target = byKey.get(key);
+		if (target === void 0) throw new ThemeError(`"${from}" references unknown token "${key}"`);
+		return resolveRaw(`var(${target.varName})`, byVarName, byKey, [...chain, entry.key]);
+	} }, entry.key);
+}
+/**
+* A projected value may itself be a `var()` reference to a token the projection
+* left behind, which the cascade would resolve to nothing. The reference is
+* detectable because its variable belonged to the theme being projected from.
+*/
+function assertNoDroppedReferences(tokens, sourceByVarName) {
+	let kept = /* @__PURE__ */ new Set();
+	let walkValues = (node, path) => {
+		if (typeof node === "object" && node !== null && !Array.isArray(node)) {
+			for (let [key, value] of Object.entries(node)) walkValues(value, [...path, key]);
+			return;
+		}
+		for (let varName of mentionedVarNames(node)) {
+			let source = sourceByVarName.get(varName);
+			if (source !== void 0 && !kept.has(source.varName)) throw new ThemeError(`"${path.join(".")}" references "${source.key}", which the projection dropped`);
+		}
+	};
+	let record = (node, path) => {
+		if (typeof node === "object" && node !== null && !Array.isArray(node)) {
+			for (let [key, value] of Object.entries(node)) record(value, [...path, key]);
+			return;
+		}
+		kept.add(`--${path.map(kebabSegment).join("-")}`);
+	};
+	record(tokens, []);
+	walkValues(tokens, []);
+}
+function buildAccessor(entries) {
+	let root = Object.create(null);
+	for (let entry of entries) {
+		let node = root;
+		for (let segment of entry.path.slice(0, -1)) {
+			let next = node[segment];
+			if (next === void 0) {
+				next = Object.create(null);
+				node[segment] = next;
+			}
+			node = next;
+		}
+		let ref = `var(${entry.varName})`;
+		node[entry.path.at(-1)] = entry.kind === "scale" ? scaleLeaf(ref) : ref;
+	}
+	return root;
+}
+function scaleLeaf(ref) {
+	let fn = (steps) => `calc(${ref} * ${steps})`;
+	return Object.assign(fn, { token: ref });
+}
+function buildCssText(declarations, blocks) {
+	let lines = declarations.map(([name, value]) => `    ${name}: ${value};`);
+	if (declarations.some(([, value]) => value.includes("light-dark("))) lines.unshift("    color-scheme: light dark;");
+	return [`:root {\n${lines.join("\n")}\n}`, ...blocks].join("\n\n");
+}
+function createThemeComponent(cssText, init) {
+	let escaped = cssText.replaceAll("</style", "<\\/style");
+	let component = (handle) => () => createElement("style", {
+		nonce: handle.props.nonce,
+		"data-pitlane-theme": "",
+		innerHTML: escaped
+	});
+	return Object.assign(component, { $theme: init });
+}
+function mergeDeep(a, b) {
+	if (!isPlainRecord(a) || !isPlainRecord(b)) return b;
+	let out = { ...a };
+	for (let [key, value] of Object.entries(b)) out[key] = mergeDeep(out[key], value);
+	return out;
+}
+function isPlainRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) && !isTokenSchema(value);
+}
+/**
+* A projection holds accessor references, so each one resolves back to
+* the value its token holds. A scale leaf is projected through its
+* `.token`, which is an ordinary reference by the time it arrives.
+*/
+function reroot(node, byVarName) {
+	if (typeof node === "object" && node !== null && !Array.isArray(node)) {
+		let out = {};
+		for (let [key, value] of Object.entries(node)) out[key] = reroot(value, byVarName);
+		return out;
+	}
+	if (typeof node !== "string") return node;
+	let match = REF_RE.exec(node);
+	if (match === null) return node;
+	let source = byVarName.get(match[1]);
+	if (source === void 0) throw new ThemeError(`"${node}" was not minted by the theme being selected from`);
+	return source.value;
+}
+//#endregion
+export { createTheme as t };

package/dist/theme-Ck-4suI4.d.mts

@@ -0,0 +1,278 @@
+import { A as DimensionToken, B as UntypedToken, D as BrandByType, F as NumberToken, R as TokenType, T as AnyToken, a as TAG, i as SchemaTag, j as DurationToken, t as SELF } from "./schema-CRP607Pg.mjs";
+import { Handle, RemixElement } from "remix/ui";
+//#region src/types.d.ts
+/**
+ * A token value: the CSS it becomes. A string, a number, or an array
+ * of either. Anything else is a group.
+ *
+ * @see {@link Tokens}
+ */
+type TokenValue = number | readonly (number | string)[] | string;
+/**
+ * The token tree {@link createTheme} accepts: nested records whose
+ * leaves are {@link TokenValue}s. No reserved keys, so it is plain
+ * JSON and a designer can diff it.
+ */
+interface Tokens {
+  [key: string]: Tokens | TokenValue;
+}
+/**
+ * The accessor leaf for a token declared with `s.scale()`: callable
+ * for steps, with the base itself as `.token`.
+ *
+ * `.token` is what a projection re-roots and what `raw` resolves, so
+ * it is load-bearing rather than decorative.
+ *
+ * @see {@link TokenTree}
+ */
+interface ScaleFn {
+  (steps: number): DimensionToken;
+  readonly token: DimensionToken;
+}
+/** A theme's mode: a condition plus the values it overrides. */
+interface ThemeMode<T> {
+  /**
+   * The media query this mode applies under. Defaults to
+   * `(prefers-color-scheme: <name>)` for the names `light` and
+   * `dark`, and is required for any other name.
+   */
+  media?: string;
+  /**
+   * A selector this mode also applies under, for a user-selectable
+   * toggle. An attribute selector outranks the media block on
+   * specificity, so an explicit choice beats the OS preference.
+   */
+  selector?: string;
+  /** The values this mode overrides. Structure only, never types. */
+  tokens: DeepPartialTokens<T>;
+}
+/**
+ * The argument {@link createTheme} accepts: a schema tree, the token
+ * tree it describes, and any modes.
+ *
+ * The members are typed as bare objects on purpose. A `const` type
+ * parameter constrained to an index-signature type widens the literal
+ * it was inferred from, which would erase every brand; the shapes are
+ * enforced by the schema factories being typed values, by an
+ * undeclared leaf resolving to `unknown`, and by validation at module
+ * load.
+ */
+interface ThemeInit {
+  schema: object;
+  tokens: object;
+  modes?: object;
+}
+/**
+ * The argument `extend` accepts. `schema` is optional, because a patch
+ * that only adds tokens to an existing namespace needs no new entry.
+ */
+interface ThemePatch {
+  schema?: object;
+  tokens: object;
+  modes?: object;
+}
+/**
+ * The mode-override shape for a token tree: every group optional, every
+ * leaf a value. A mode overrides values, never structure or types.
+ */
+type DeepPartialTokens<T> = 0 extends 1 & T ? unknown : { [K in keyof T]?: T[K] extends Leaf ? TokenValue : DeepPartialTokens<T[K]>; };
+type Leaf = number | readonly (number | string)[] | string;
+type BrandOf<tag> = [tag] extends [never] ? unknown : [tag] extends ["any"] ? UntypedToken : [tag] extends ["scale"] ? ScaleFn : tag extends TokenType ? BrandByType[tag] : unknown;
+/** The tag a schema node declares for itself and its unlabelled children. */
+type NodeTag<S, Inherited> = S extends {
+  readonly [TAG]: infer tag extends SchemaTag;
+} ? tag : S extends {
+  readonly [SELF]: {
+    readonly [TAG]: infer tag extends SchemaTag;
+  };
+} ? tag : Inherited;
+type Child<S, K> = K extends keyof S ? S[K] : undefined;
+type LeafTag<S, Inherited> = S extends {
+  readonly [TAG]: infer tag extends SchemaTag;
+} ? tag : Inherited;
+type TreeOf<Tok, Sch, Inherited> = { [K in keyof Tok]: Tok[K] extends Leaf ? BrandOf<LeafTag<Child<Sch, K>, Inherited>> : TreeOf<Tok[K], Child<Sch, K>, NodeTag<Child<Sch, K>, Inherited>>; };
+/**
+ * The accessor shape for an init `T`: the same nesting as its token
+ * tree, with every leaf replaced by the branded `var(--…)` reference
+ * its schema declares. Numeric keys index with brackets
+ * (`t.color.gray[900]`).
+ *
+ * A leaf whose schema entry is missing resolves to `unknown`, which is
+ * unusable in `css()`. The compiler also throws for it at module load.
+ *
+ * @see {@link ThemeResult}
+ */
+type TokenTree<T> = 0 extends 1 & T ? unknown : T extends {
+  schema: infer Sch;
+  tokens: infer Tok;
+} ? TreeOf<Tok, Sch, never> : unknown;
+/**
+ * Deep-merges an `extend` patch onto the tree it extends. A leaf
+ * replaces wholesale; every other node recurses.
+ *
+ * @internal
+ */
+type DeepMerge<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K extends keyof A ? B[K] extends Leaf ? B[K] : A[K] extends Leaf ? B[K] : DeepMerge<A[K], B[K]> : B[K] : K extends keyof A ? A[K] : never; };
+/**
+ * The init an `extend` produces: both trees merged.
+ *
+ * @internal
+ */
+interface Merged<T, E> {
+  schema: DeepMerge<T extends {
+    schema: infer S;
+  } ? S : {}, E extends {
+    schema: infer S;
+  } ? S : {}>;
+  tokens: DeepMerge<T extends {
+    tokens: infer S;
+  } ? S : {}, E extends {
+    tokens: infer S;
+  } ? S : {}>;
+}
+/** The bases {@link scale} accepts. @internal */
+type ScalableToken = DimensionToken | DurationToken | NumberToken;
+//#endregion
+//#region src/theme.d.ts
+/**
+ * Props for the {@link ThemeComponent}. `nonce` sets the `nonce`
+ * attribute on the emitted `<style>` element for Content Security
+ * Policy setups.
+ */
+type ThemeProps = {
+  nonce?: string;
+};
+/**
+ * The `<Theme />` component {@link createTheme} returns. Render it
+ * once near the document root to install the custom properties.
+ *
+ * It is an ordinary component with one extra property, `$theme`,
+ * holding the init it was compiled from, so a published theme can be
+ * handed straight back to {@link createTheme}.
+ */
+interface ThemeComponent<T> {
+  (handle: Handle<ThemeProps>): () => RemixElement;
+  readonly $theme: T;
+}
+/**
+ * The object {@link createTheme} returns: the typed token accessor,
+ * the `raw` resolver, the `<Theme />` component, and the two
+ * derivation methods.
+ */
+interface ThemeResult<T> {
+  /**
+   * The compiled CSS text `<Theme />` installs. Exposed for tests
+   * and for a build step that emits it as an asset.
+   *
+   * @internal
+   */
+  readonly cssText: string;
+  /**
+   * A typed mirror of the token tree whose leaves are branded
+   * `var()` reference strings. A `s.scale()` leaf is callable.
+   */
+  readonly token: TokenTree<T>;
+  /**
+   * Resolves a token reference to its concrete base value, following
+   * references to the end.
+   *
+   * @param ref - A token reference minted by this theme
+   * @returns The serialized base value
+   * @throws ThemeError when the reference was not minted here
+   */
+  raw(ref: AnyToken | UntypedToken): string;
+  /** The component that installs the custom properties. */
+  readonly Theme: ThemeComponent<T>;
+  /**
+   * Deep-merges a patch onto this theme and returns a new one. A
+   * leaf replaces wholesale; every other node recurses.
+   *
+   * The callback form receives this theme's accessor, so a patch can
+   * reference what it extends.
+   *
+   * @param patch - The tokens and schema to merge, or a callback returning them
+   * @returns A new theme
+   */
+  extend<const schema extends object, const tokens extends object>(patch: ExtendPatch<T, schema, tokens> | ((base: TokenTree<T>) => ExtendPatch<T, schema, tokens>)): ThemeResult<Merged<T, {
+    schema: schema;
+    tokens: tokens;
+  }>>;
+  /**
+   * Replaces this theme with a projection of it. The callback
+   * receives this theme's accessor; every value in the projection is
+   * a reference into it, and the new path decides the new custom
+   * property name, so a projection may also reshape and rename.
+   *
+   * @param projection - A callback returning the schema and tokens to keep
+   * @returns A new theme
+   */
+  select<const P extends ThemeInit>(projection: (base: TokenTree<T>) => P): ThemeResult<P>;
+}
+/**
+ * An `extend` patch. Its modes are checked against the merged token tree rather
+ * than the patch's own, because a layer whose only job is to override a base
+ * token in a mode declares no tokens of its own.
+ */
+type ExtendPatch<T, schema, tokens> = {
+  schema?: schema;
+  tokens: tokens;
+  modes?: Record<string, ThemeMode<T extends {
+    tokens: infer base;
+  } ? DeepMerge<base, tokens> : tokens>>;
+};
+/**
+ * Compiles a theme from a schema tree and the token tree it describes.
+ *
+ * Values are the CSS they become: a color is any CSS color, a
+ * dimension is any CSS length, and a composite is the shorthand text.
+ * The schema names each token's type, which is what the accessor's
+ * compile-time brands are read from and what `css()` enforces.
+ *
+ * A reference to another token is a property access on the layer below,
+ * so it needs an {@link ThemeResult.extend} layer. The accessor leaf is
+ * already a `var()` string, which keeps its indirection in the emitted
+ * CSS so a mode override cascades through it. There is no string syntax
+ * for a reference; a leftover `"{a.b.c}"` raises {@link ThemeError}.
+ *
+ * All validation and serialization happen eagerly: a malformed theme
+ * throws at module load rather than emitting broken CSS. Bad values
+ * raise `ValidationError` from `remix/data-schema`, carrying one issue
+ * per bad token with its path. Structural problems raise
+ * {@link ThemeError}.
+ *
+ * @param init - The schema, tokens, and modes, or a `<Theme />` to re-derive from
+ * @returns The {@link ThemeResult}
+ * @throws ThemeError on a structural failure
+ * @throws ValidationError on one or more invalid values
+ *
+ * @see {@link ThemeInit} for the accepted shape.
+ *
+ * @example
+ * ```ts
+ * import { createTheme } from "@pitlane/theme";
+ * import * as s from "@pitlane/theme/schema";
+ *
+ * export let { token: t, raw, Theme } = createTheme({
+ *     schema: { color: s.color(), spacing: s.scale() },
+ *     tokens: { color: { white: "#fff" }, spacing: "0.25rem" },
+ * }).extend(base => ({
+ *     schema: { color: s.color() },
+ *     tokens: { color: { page: base.color.white } },
+ * }));
+ *
+ * t.color.page; // "var(--color-page)"
+ * raw(t.color.page); // "#fff"
+ * t.spacing(4); // "calc(var(--spacing) * 4)"
+ * ```
+ */
+declare function createTheme<const schema extends object, const tokens extends object>(init: {
+  schema: schema;
+  tokens: tokens;
+  modes?: Record<string, ThemeMode<tokens>>;
+}): ThemeResult<{
+  schema: schema;
+  tokens: tokens;
+}>;
+declare function createTheme<T>(theme: ThemeComponent<T>): ThemeResult<T>;
+//#endregion
+export { DeepPartialTokens as a, ScaleFn as c, ThemePatch as d, TokenTree as f, createTheme as i, ThemeInit as l, Tokens as m, ThemeProps as n, Merged as o, TokenValue as p, ThemeResult as r, ScalableToken as s, ThemeComponent as t, ThemeMode as u };

package/package.json

@@ -1,53 +1,63 @@
 {
-    "name": "@pitlane/theme",
-    "version": "0.1.0",
-    "description": "Type-safe styling with W3C design tokens for Remix 3.",
-    "keywords": [
-        "css-variables",
-        "design-tokens",
-        "dtcg",
-        "pitlane",
-        "remix",
-        "theme"
-    ],
-    "homepage": "https://pitlane.tools/package/theme/",
-    "bugs": {
-        "url": "https://github.com/pitlane-tools/pitlane/issues"
+  "name": "@pitlane/theme",
+  "version": "0.3.0",
+  "description": "Type-safe styling with W3C design tokens for Remix 3.",
+  "keywords": [
+    "css-variables",
+    "design-tokens",
+    "dtcg",
+    "pitlane",
+    "remix",
+    "theme"
+  ],
+  "homepage": "https://pitlane.tools/package/theme/",
+  "bugs": {
+    "url": "https://github.com/pitlane-tools/pitlane/issues"
+  },
+  "license": "MIT",
+  "author": "Mark Malstrom <mark@malstrom.me>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pitlane-tools/pitlane.git",
+    "directory": "packages/theme"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
     },
-    "license": "MIT",
-    "author": "Mark Malstrom <mark@malstrom.me>",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/pitlane-tools/pitlane.git",
-        "directory": "packages/theme"
+    "./schema": {
+      "types": "./dist/schema.d.mts",
+      "import": "./dist/schema.mjs"
     },
-    "files": [
-        "dist",
-        "CHANGELOG.md"
-    ],
-    "type": "module",
-    "types": "./dist/index.d.mts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.mts",
-            "import": "./dist/index.mjs"
-        }
+    "./default": {
+      "types": "./dist/default.d.mts",
+      "import": "./dist/default.mjs"
     },
-    "scripts": {
-        "prepublishOnly": "vp run build"
-    },
-    "dependencies": {
-        "csstype": "^3.2.3"
-    },
-    "devDependencies": {
-        "remix": "3.0.0-beta.5",
-        "typescript": "^7.0.2",
-        "vite-plus": "^0.2.6"
-    },
-    "peerDependencies": {
-        "remix": "^3.0.0-beta.5"
-    },
-    "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+    "./dtcg": {
+      "types": "./dist/dtcg.d.mts",
+      "import": "./dist/dtcg.mjs"
     }
-}
+  },
+  "dependencies": {
+    "csstype": "^3.2.3"
+  },
+  "devDependencies": {
+    "remix": "3.0.0-beta.10",
+    "typescript": "^7.0.2",
+    "vite-plus": "^0.2.6"
+  },
+  "peerDependencies": {
+    "remix": "^3.0.0-beta.10"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {}
+}