@rokkit/core 1.2.0 → 1.3.1

package/dist/constants.d.ts

@@ -65,19 +65,6 @@ export namespace DEFAULT_THEME_MAPPING {
     let error: string;
     let info: string;
 }
-export namespace TONE_MAP {
-    let z0: number;
-    let z1: number;
-    let z2: number;
-    let z3: number;
-    let z4: number;
-    let z5: number;
-    let z6: number;
-    let z7: number;
-    let z8: number;
-    let z9: number;
-    let z10: number;
-}
 export const INVERTED_ROLES: Set<string>;
 export const DEFAULT_STATE_ICONS: any;
 export { defaultColors, syntaxColors, shades, defaultPalette } from "./colors/index";

package/dist/named-tokens.d.ts

@@ -5,8 +5,6 @@
 export declare const NAMED_TOKENS: readonly ["paper", "paper-soft", "paper-mute", "paper-edge", "ink", "ink-mute", "ink-soft", "ink-faint", "primary", "on-primary", "accent", "accent-soft", "success", "success-soft", "warning", "warning-soft", "danger", "danger-soft", "error", "error-soft", "info", "info-soft", "focus-ring", "shadow-tint"];
 export type NamedToken = (typeof NAMED_TOKENS)[number];
 export type SkinRole = 'surface' | 'ink' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'error' | 'info';
-export type ZSlot = 'z0' | 'z1' | 'z2' | 'z3' | 'z4' | 'z5' | 'z6' | 'z7' | 'z8' | 'z9' | 'z10';
-export declare const Z_SLOTS: ZSlot[];
 /**
  * Maps each named token to the palette shade index that backs it.
  * 'derived' indicates the token is computed (e.g., on-primary is the auto
@@ -32,19 +30,6 @@ export declare const NAMED_TOKEN_SHADE_MAP: Record<NamedToken, number | 'derived
  * Maps each named token to the skin role whose palette it draws from.
  */
 export declare const NAMED_TOKEN_ROLE_MAP: Record<NamedToken, SkinRole>;
-/**
- * Surface z-slot → named slot. Used to emit back-compat aliases like
- * `--color-surface-z1: var(--paper-soft);` in core mode.
- *
- * z2/z3 collapse to paper-mute, z5/z6 to ink-soft, z7/z8 to ink-mute,
- * z9/z10 to ink. This collapse is the contract: 4 surface tones in core mode.
- */
-export declare const Z_COLLAPSE_MAP_SURFACE: Record<ZSlot, NamedToken>;
-/**
- * Ink role uses the inverted z-scale (z0 = darkest = primary text).
- * In core mode, the same 4+4 named ladder is reused; this table just inverts.
- */
-export declare const Z_COLLAPSE_MAP_INK: Record<ZSlot, NamedToken>;
 /**
  * Returns true when the role has a `-soft` companion in the named vocabulary.
  * Used to decide whether the role's tinted-background slot collapses to

package/dist/theme.d.ts

@@ -29,12 +29,6 @@ export declare function themeRules(mapping: {
     error: string;
     info: string;
 } | undefined, colors: any, colorSpace: any): {};
-/**
- * Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
- * @param {string} name - Color name (e.g., 'primary')
- * @returns {Array} Array of shortcut definitions
- */
-export declare function semanticShortcuts(name: any): (string[] | (RegExp | (([, variant, end]: [any, any, any]) => string))[] | (RegExp | (([, end]: [any, any]) => string))[])[];
 /**
  * Generates "on-color" text shortcuts for readable text on colored backgrounds.
  *
@@ -108,20 +102,8 @@ export declare class Theme {
      *   (and for the whole map when undefined).
      */
     getNamedTokens(_mode?: string, perRoleModes?: Record<string, 'core' | 'extended'>): Record<string, string>;
-    /**
-     * Returns z-alias CSS-var assignments for back-compat in core mode.
-     * `--color-{role}-z{n}` → `var(--{namedSlot})`.
-     *
-     * - surface: uses Z_COLLAPSE_MAP_SURFACE (z2/z3 → paper-mute, z9/z10 → ink, etc.)
-     * - ink: uses Z_COLLAPSE_MAP_INK (inverted scale)
-     * - primary/accent/status: tint-vs-solid 2-state collapse.
-     *   z0–z2 → role-soft (if it exists) else role; z3+ → role.
-     *
-     * This is the back-compat layer: existing `@apply bg-surface-z3` etc. resolves
-     * through these aliases until consumers migrate to the named vocabulary.
-     */
-    /** Accepts SkinRole and any custom skin roles beyond the SkinRole literal union. */
-    getZAliasesForCore(role: string): Record<string, string>;
+    /** Bare `--color-{role}` alias backing preset-wind3 utilities (from-/to-/divide-) in core mode. */
+    getRoleBaseAlias(role: string): Record<string, string>;
     /**
      * Returns named tokens as CSS-var aliases pointing at the palette layer.
      * Used in extended mode where the preset emits the full --color-{role}-{shade}
@@ -136,21 +118,5 @@ export declare class Theme {
      * Mirrors what getPalette does for all roles, but scoped to one.
      */
     getPaletteForRole(role: string): Record<string, string>;
-    /**
-     * Emit z-aliases for one role in extended mode — they point at the palette vars,
-     * using TONE_MAP for surface/non-inverted roles and the inverted map for ink.
-     */
-    getZAliasesForRoleExtended(role: string): Record<string, string>;
-    getShortcuts(name: any): (string[] | (RegExp | (([, variant, end]: [any, any, any]) => string))[] | (RegExp | (([, end]: [any, any]) => string))[])[];
-    /**
-     * Generates CSS custom property declarations for the semantic z0–z10 tone scale.
-     *
-     * Returns a CSS string with two blocks:
-     * - `:root` — light-mode aliases (z0=50 … z10=950)
-     * - `[data-mode="dark"]` — dark-mode aliases (z0=950 … z10=50)
-     *
-     * These let consumers write `var(--color-primary-z5)` instead of hardcoding
-     * numeric shades, and the value automatically adapts to the active mode.
-     */
-    getZScaleCSS(): string;
+    getShortcuts(name: any): (RegExp | (([, end]: [any, any]) => string))[][];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "repository": {
     "type": "git",
@@ -46,6 +46,6 @@
     "ramda": "^0.32.0"
   },
   "devDependencies": {
-    "@rokkit/icons": "1.2.0"
+    "@rokkit/icons": "1.3.1"
   }
 }

package/src/constants.js

@@ -183,20 +183,6 @@ export const DEFAULT_THEME_MAPPING = {
 	info: 'cyan'
 }
 
-export const TONE_MAP = {
-	z0: 50,
-	z1: 100,
-	z2: 200,
-	z3: 300,
-	z4: 400,
-	z5: 500,
-	z6: 600,
-	z7: 700,
-	z8: 800,
-	z9: 900,
-	z10: 950
-}
-
 export const INVERTED_ROLES = new Set(['ink'])
 
 /**

package/src/named-tokens.ts

@@ -21,10 +21,6 @@ export type SkinRole =
   | 'surface' | 'ink' | 'primary' | 'accent'
   | 'success' | 'warning' | 'danger' | 'error' | 'info'
 
-export type ZSlot = 'z0' | 'z1' | 'z2' | 'z3' | 'z4' | 'z5' | 'z6' | 'z7' | 'z8' | 'z9' | 'z10'
-
-export const Z_SLOTS: ZSlot[] = ['z0', 'z1', 'z2', 'z3', 'z4', 'z5', 'z6', 'z7', 'z8', 'z9', 'z10']
-
 /**
  * Maps each named token to the palette shade index that backs it.
  * 'derived' indicates the token is computed (e.g., on-primary is the auto
@@ -102,45 +98,6 @@ export const NAMED_TOKEN_ROLE_MAP: Record<NamedToken, SkinRole> = {
   'shadow-tint': 'ink'
 }
 
-/**
- * Surface z-slot → named slot. Used to emit back-compat aliases like
- * `--color-surface-z1: var(--paper-soft);` in core mode.
- *
- * z2/z3 collapse to paper-mute, z5/z6 to ink-soft, z7/z8 to ink-mute,
- * z9/z10 to ink. This collapse is the contract: 4 surface tones in core mode.
- */
-export const Z_COLLAPSE_MAP_SURFACE: Record<ZSlot, NamedToken> = {
-  z0: 'paper',
-  z1: 'paper-soft',
-  z2: 'paper-mute',
-  z3: 'paper-mute',
-  z4: 'paper-edge',
-  z5: 'ink-soft',
-  z6: 'ink-soft',
-  z7: 'ink-mute',
-  z8: 'ink-mute',
-  z9: 'ink',
-  z10: 'ink'
-}
-
-/**
- * Ink role uses the inverted z-scale (z0 = darkest = primary text).
- * In core mode, the same 4+4 named ladder is reused; this table just inverts.
- */
-export const Z_COLLAPSE_MAP_INK: Record<ZSlot, NamedToken> = {
-  z0: 'ink',
-  z1: 'ink-mute',
-  z2: 'ink-mute',
-  z3: 'ink-soft',
-  z4: 'ink-soft',
-  z5: 'paper-edge',
-  z6: 'paper-edge',
-  z7: 'paper-mute',
-  z8: 'paper-mute',
-  z9: 'paper-soft',
-  z10: 'paper'
-}
-
 const SOFT_TOKENS: Set<string> = new Set(NAMED_TOKENS.filter((t) => t.endsWith('-soft')))
 
 /**

package/src/theme.ts

@@ -1,16 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import { DEFAULT_THEME_MAPPING, defaultColors, TONE_MAP, INVERTED_ROLES } from './constants'
+import { DEFAULT_THEME_MAPPING, defaultColors } from './constants'
 import { shades } from './colors/index'
 import { ColorSpace, relativeLuminance } from './color-space'
 import {
   NAMED_TOKENS,
   NAMED_TOKEN_SHADE_MAP,
-  NAMED_TOKEN_ROLE_MAP,
-  Z_COLLAPSE_MAP_SURFACE,
-  Z_COLLAPSE_MAP_INK,
-  Z_SLOTS,
-  hasSoftCompanion
+  NAMED_TOKEN_ROLE_MAP
 } from './named-tokens'
 
 /**
@@ -72,64 +68,6 @@ export function themeRules(mapping = DEFAULT_THEME_MAPPING, colors = defaultColo
 	return rules
 }
 
-const SEMANTIC_PREFIXES = [
-	'bg',
-	'border',
-	'border-l',
-	'border-r',
-	'border-t',
-	'border-b',
-	'text',
-	'ring',
-	'outline',
-	'from',
-	'to',
-	'divide',
-	'stroke',
-	'fill'
-]
-
-/**
- * @param {{ prefix: string, name: string, toneName: string, lightValue: number, darkValue: number }} opts
- * @returns {Array}
- */
-function toneShortcuts({ prefix, name, toneName, lightValue, darkValue }) {
-	const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\\/\\d+)?$`)
-	const opacityPattern = new RegExp(`^${prefix}-${name}-${toneName}(\\/\\d+)?$`)
-	const exactPattern = `${prefix}-${name}-${toneName}`
-	return [
-		[
-			variantPattern,
-			([, variant, end]) =>
-				`${variant}:${prefix}-${name}-${lightValue}${end || ''} ${variant}:dark:${prefix}-${name}-${darkValue}${end || ''}`
-		],
-		[
-			opacityPattern,
-			([, end]) =>
-				`${prefix}-${name}-${lightValue}${end || ''} dark:${prefix}-${name}-${darkValue}${end || ''}`
-		],
-		[exactPattern, `${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`]
-	]
-}
-
-/**
- * Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
- * @param {string} name - Color name (e.g., 'primary')
- * @returns {Array} Array of shortcut definitions
- */
-export function semanticShortcuts(name) {
-	const inverted = INVERTED_ROLES.has(name)
-	const shortcuts = []
-	for (const [toneName, toneValue] of Object.entries(TONE_MAP)) {
-		const lightValue = inverted ? 1000 - toneValue : toneValue
-		const darkValue  = inverted ? toneValue : 1000 - toneValue
-		for (const prefix of SEMANTIC_PREFIXES) {
-			shortcuts.push(...toneShortcuts({ prefix, name, toneName, lightValue, darkValue }))
-		}
-	}
-	return shortcuts
-}
-
 /**
  * Generates "on-color" text shortcuts for readable text on colored backgrounds.
  *
@@ -332,6 +270,7 @@ export class Theme {
 		if (name === 'on-primary') {
 			return this.#adapter.wrap(this.#onColorHex('primary', colors))
 		}
+		/* v8 ignore next -- on-primary is the only 'derived' token, so this default is unreachable */
 		return undefined
 	}
 
@@ -349,63 +288,18 @@ export class Theme {
 		return y >= ON_COLOR_Y_CROSSOVER ? ON_COLOR_DARK : ON_COLOR_LIGHT
 	}
 
-	/**
-	 * Generate z-aliases for surface or ink role using the provided map.
-	 */
-	#getZAliasesFromMap(role: 'surface' | 'ink', map: Record<ZSlot, NamedToken>): Record<string, string> {
-		const result: Record<string, string> = {}
-		// Bare `--color-{role}` alias — points at the role's primary named
-		// slot. Lets preset-wind3 color utilities (bg-surface, from-surface,
-		// to-surface, etc.) resolve in core mode without forcing the full
-		// palette emit. Surface → paper, Ink → ink.
-		result[`--color-${role}`] = role === 'surface' ? 'var(--paper)' : 'var(--ink)'
-		for (const z of Z_SLOTS) {
-			result[`--color-${role}-${z}`] = `var(--${map[z]})`
-		}
-		return result
+	#surfaceInkAlias(role: 'surface' | 'ink'): Record<string, string> {
+		return { [`--color-${role}`]: role === 'surface' ? 'var(--paper)' : 'var(--ink)' }
 	}
 
-	/**
-	 * Generate z-aliases for other roles using tint-vs-solid 2-state collapse.
-	 */
-	#getZAliasesOther(role: string): Record<string, string> {
-		const result: Record<string, string> = {}
-		const hasSoft = hasSoftCompanion(role)
-		const softTarget = hasSoft ? `${role}-soft` : role
-		// Bare `--color-{role}` alias points at the named token so
-		// preset-wind3 color utilities (from-{role}, to-{role}, divide-{role},
-		// etc.) resolve in core mode — they read `--color-{role}` and we'd
-		// otherwise leave it undefined since core mode skips the palette emit.
-		result[`--color-${role}`] = `var(--${role})`
-		for (const z of Z_SLOTS) {
-			const zNum = parseInt(z.slice(1), 10)
-			const target = zNum <= 2 ? softTarget : role
-			result[`--color-${role}-${z}`] = `var(--${target})`
-		}
-		return result
+	#otherRoleAlias(role: string): Record<string, string> {
+		return { [`--color-${role}`]: `var(--${role})` }
 	}
 
-	/**
-	 * Returns z-alias CSS-var assignments for back-compat in core mode.
-	 * `--color-{role}-z{n}` → `var(--{namedSlot})`.
-	 *
-	 * - surface: uses Z_COLLAPSE_MAP_SURFACE (z2/z3 → paper-mute, z9/z10 → ink, etc.)
-	 * - ink: uses Z_COLLAPSE_MAP_INK (inverted scale)
-	 * - primary/accent/status: tint-vs-solid 2-state collapse.
-	 *   z0–z2 → role-soft (if it exists) else role; z3+ → role.
-	 *
-	 * This is the back-compat layer: existing `@apply bg-surface-z3` etc. resolves
-	 * through these aliases until consumers migrate to the named vocabulary.
-	 */
-	/** Accepts SkinRole and any custom skin roles beyond the SkinRole literal union. */
-	getZAliasesForCore(role: string): Record<string, string> {
-		if (role === 'surface') {
-			return this.#getZAliasesFromMap('surface', Z_COLLAPSE_MAP_SURFACE)
-		}
-		if (role === 'ink') {
-			return this.#getZAliasesFromMap('ink', Z_COLLAPSE_MAP_INK)
-		}
-		return this.#getZAliasesOther(role)
+	/** Bare `--color-{role}` alias backing preset-wind3 utilities (from-/to-/divide-) in core mode. */
+	getRoleBaseAlias(role: string): Record<string, string> {
+		if (role === 'surface' || role === 'ink') return this.#surfaceInkAlias(role)
+		return this.#otherRoleAlias(role)
 	}
 
 	/**
@@ -450,53 +344,9 @@ export class Theme {
 		return result
 	}
 
-	/**
-	 * Emit z-aliases for one role in extended mode — they point at the palette vars,
-	 * using TONE_MAP for surface/non-inverted roles and the inverted map for ink.
-	 */
-	getZAliasesForRoleExtended(role: string): Record<string, string> {
-		const result: Record<string, string> = {}
-		const isInverted = INVERTED_ROLES.has(role)
-		for (const [zone, light] of Object.entries(TONE_MAP)) {
-			const shade = isInverted ? 1000 - light : light
-			result[`--color-${role}-${zone}`] = `var(--color-${role}-${shade})`
-		}
-		return result
-	}
-
 	getShortcuts(name) {
 		const colors = { ...defaultColors, ...this.#colors }
-		return [...semanticShortcuts(name), ...contrastShortcuts(name, this.#onColorHex(name, colors))]
+		return contrastShortcuts(name, this.#onColorHex(name, colors))
 	}
 
-	/**
-	 * Generates CSS custom property declarations for the semantic z0–z10 tone scale.
-	 *
-	 * Returns a CSS string with two blocks:
-	 * - `:root` — light-mode aliases (z0=50 … z10=950)
-	 * - `[data-mode="dark"]` — dark-mode aliases (z0=950 … z10=50)
-	 *
-	 * These let consumers write `var(--color-primary-z5)` instead of hardcoding
-	 * numeric shades, and the value automatically adapts to the active mode.
-	 */
-	getZScaleCSS() {
-		const names = Object.keys(this.#mapping)
-
-		const lightLines = names.flatMap((name) =>
-			Object.entries(TONE_MAP).map(([zone, light]) => {
-				const value = INVERTED_ROLES.has(name) ? 1000 - light : light
-				return `  --color-${name}-${zone}: var(--color-${name}-${value});`
-			})
-		)
-
-		const darkLines = names.flatMap((name) =>
-			Object.entries(TONE_MAP).map(([zone, light]) => {
-				const dark = 1000 - light
-				const value = INVERTED_ROLES.has(name) ? light : dark
-				return `  --color-${name}-${zone}: var(--color-${name}-${value});`
-			})
-		)
-
-		return `:root {\n${lightLines.join('\n')}\n}\n[data-mode="dark"] {\n${darkLines.join('\n')}\n}`
-	}
 }

package/src/utils.js

@@ -172,12 +172,13 @@ export function getSnippet(obj, key, defaultSnippet = null) {
 /**
  * Resolve which snippet to render for a proxy item.
  *
- * Checks proxy.snippet for a per-item named override first (e.g. item.snippet = 'highlighted').
+ * Reads the proxy's `snippet` field (via proxy.get('snippet'), honoring fields.snippet)
+ * for a per-item named override first (e.g. item.snippet = 'highlighted').
  * Falls back to the component-level fallback snippet name (e.g. 'itemContent' / 'groupContent').
  * Returns null if neither is found.
  *
  * @param {Record<string, unknown>} snippets  - snippets passed to the component
- * @param {{ snippet?: string | null }} proxy  - any object with an optional .snippet property
+ * @param {{ get: (key: string) => unknown }} proxy  - a ProxyItem; its snippet field is read via proxy.get('snippet')
  * @param {string} [fallback]                  - fallback snippet name; defaults to ITEM_SNIPPET ('itemContent')
  * @returns {Function | null}
  */
@@ -190,7 +191,9 @@ function asSnippet(value) {
 }
 
 export function resolveSnippet(snippets, proxy, fallback = ITEM_SNIPPET) {
-	const name = proxy && proxy.snippet
+	// `snippet` is a field-mapped prop like icon/href — read it via the proxy's
+	// field accessor (honors fields.snippet), not as a direct property.
+	const name = proxy?.get('snippet')
 	return asSnippet(name && snippets[name]) || asSnippet(snippets[fallback])
 }