@rokkit/core 1.0.0-next.14 → 1.0.0-next.140

package/src/colors/tailwind.json

@@ -0,0 +1,275 @@
+{
+  "amber": {
+    "50": "#fffbeb",
+    "100": "#fef3c7",
+    "200": "#fde68a",
+    "300": "#fcd34d",
+    "400": "#fbbf24",
+    "500": "#f59e0b",
+    "600": "#d97706",
+    "700": "#b45309",
+    "800": "#92400e",
+    "900": "#78350f",
+    "950": "#451a03"
+  },
+  "blue": {
+    "50": "#eff6ff",
+    "100": "#dbeafe",
+    "200": "#bfdbfe",
+    "300": "#93c5fd",
+    "400": "#60a5fa",
+    "500": "#3b82f6",
+    "600": "#2563eb",
+    "700": "#1d4ed8",
+    "800": "#1e40af",
+    "900": "#1e3a8a",
+    "950": "#172554"
+  },
+  "cyan": {
+    "50": "#ecfeff",
+    "100": "#cffafe",
+    "200": "#a5f3fc",
+    "300": "#67e8f9",
+    "400": "#22d3ee",
+    "500": "#06b6d4",
+    "600": "#0891b2",
+    "700": "#0e7490",
+    "800": "#155e75",
+    "900": "#164e63",
+    "950": "#083344"
+  },
+  "emerald": {
+    "50": "#ecfdf5",
+    "100": "#d1fae5",
+    "200": "#a7f3d0",
+    "300": "#6ee7b7",
+    "400": "#34d399",
+    "500": "#10b981",
+    "600": "#059669",
+    "700": "#047857",
+    "800": "#065f46",
+    "900": "#064e3b",
+    "950": "#022c22"
+  },
+  "fuscia": {
+    "50": "#fdf4ff",
+    "100": "#fae8ff",
+    "200": "#f5d0fe",
+    "300": "#f0abfc",
+    "400": "#e879f9",
+    "500": "#d946ef",
+    "600": "#c026d3",
+    "700": "#a21caf",
+    "800": "#86198f",
+    "900": "#701a75",
+    "950": "#4a044e"
+  },
+  "gray": {
+    "50": "#f9fafb",
+    "100": "#f3f4f6",
+    "200": "#e5e7eb",
+    "300": "#d1d5db",
+    "400": "#9ca3af",
+    "500": "#6b7280",
+    "600": "#4b5563",
+    "700": "#374151",
+    "800": "#1f2937",
+    "900": "#111827",
+    "950": "#00060c"
+  },
+  "green": {
+    "50": "#f0fdf4",
+    "100": "#dcfce7",
+    "200": "#bbf7d0",
+    "300": "#86efac",
+    "400": "#4ade80",
+    "500": "#22c55e",
+    "600": "#16a34a",
+    "700": "#15803d",
+    "800": "#166534",
+    "900": "#14532d",
+    "950": "#052e16"
+  },
+  "indigo": {
+    "50": "#eef2ff",
+    "100": "#e0e7ff",
+    "200": "#c7d2fe",
+    "300": "#a5b4fc",
+    "400": "#818cf8",
+    "500": "#6366f1",
+    "600": "#4f46e5",
+    "700": "#4338ca",
+    "800": "#3730a3",
+    "900": "#312e81",
+    "950": "#1e1b4b"
+  },
+  "lime": {
+    "50": "#f7fee7",
+    "100": "#ecfccb",
+    "200": "#d9f99d",
+    "300": "#bef264",
+    "400": "#a3e635",
+    "500": "#84cc16",
+    "600": "#65a30d",
+    "700": "#4d7c0f",
+    "800": "#3f6212",
+    "900": "#365314",
+    "950": "#1a2e05"
+  },
+  "orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#fed7aa",
+    "300": "#fdba74",
+    "400": "#fb923c",
+    "500": "#f97316",
+    "600": "#ea580c",
+    "700": "#c2410c",
+    "800": "#9a3412",
+    "900": "#7c2d12",
+    "950": "#431407"
+  },
+  "pink": {
+    "50": "#fdf2f8",
+    "100": "#fce7f3",
+    "200": "#fbcfe8",
+    "300": "#f9a8d4",
+    "400": "#f472b6",
+    "500": "#ec4899",
+    "600": "#db2777",
+    "700": "#be185d",
+    "800": "#9d174d",
+    "900": "#831843",
+    "950": "#500724"
+  },
+  "purple": {
+    "50": "#faf5ff",
+    "100": "#f3e8ff",
+    "200": "#e9d5ff",
+    "300": "#d8b4fe",
+    "400": "#c084fc",
+    "500": "#a855f7",
+    "600": "#9333ea",
+    "700": "#7e22ce",
+    "800": "#6b21a8",
+    "900": "#581c87",
+    "950": "#3b0764"
+  },
+  "red": {
+    "50": "#fef2f2",
+    "100": "#fee2e2",
+    "200": "#fecaca",
+    "300": "#fca5a5",
+    "400": "#f87171",
+    "500": "#ef4444",
+    "600": "#dc2626",
+    "700": "#b91c1c",
+    "800": "#991b1b",
+    "900": "#7f1d1d",
+    "950": "#450a0a"
+  },
+  "rose": {
+    "50": "#fff1f2",
+    "100": "#ffe4e6",
+    "200": "#fecdd3",
+    "300": "#fda4af",
+    "400": "#fb7185",
+    "500": "#f43f5e",
+    "600": "#e11d48",
+    "700": "#be123c",
+    "800": "#9f1239",
+    "900": "#881337",
+    "950": "#4c0519"
+  },
+  "sky": {
+    "50": "#f0f9ff",
+    "100": "#e0f2fe",
+    "200": "#bae6fd",
+    "300": "#7dd3fc",
+    "400": "#38bdf8",
+    "500": "#0ea5e9",
+    "600": "#0284c7",
+    "700": "#0369a1",
+    "800": "#075985",
+    "900": "#0c4a6e",
+    "950": "#082f49"
+  },
+  "slate": {
+    "50": "#f8fafc",
+    "100": "#f1f5f9",
+    "200": "#e2e8f0",
+    "300": "#cbd5e0",
+    "400": "#94a3b8",
+    "500": "#64748b",
+    "600": "#475569",
+    "700": "#334155",
+    "800": "#1e293b",
+    "900": "#0f172a",
+    "950": "#020617"
+  },
+  "stone": {
+    "50": "#fafaf9",
+    "100": "#f5f5f4",
+    "200": "#e7e5e4",
+    "300": "#d6d3d1",
+    "400": "#a8a29e",
+    "500": "#78716c",
+    "600": "#57534e",
+    "700": "#44403c",
+    "800": "#292524",
+    "900": "#1c1917",
+    "950": "#0c0a09"
+  },
+  "teal": {
+    "50": "#f0fdfa",
+    "100": "#ccfbf1",
+    "200": "#99f6e4",
+    "300": "#5eead4",
+    "400": "#2dd4bf",
+    "500": "#14b8a6",
+    "600": "#0d9488",
+    "700": "#0f766e",
+    "800": "#115e59",
+    "900": "#134e4a",
+    "950": "#042f2e"
+  },
+  "violet": {
+    "50": "#f5f3ff",
+    "100": "#ede9fe",
+    "200": "#ddd6fe",
+    "300": "#c4b5fd",
+    "400": "#a78bfa",
+    "500": "#8b5cf6",
+    "600": "#7c3aed",
+    "700": "#6d28d9",
+    "800": "#5b21b6",
+    "900": "#4c1d95",
+    "950": "#2e1065"
+  },
+  "yellow": {
+    "50": "#fefce8",
+    "100": "#fef9c3",
+    "200": "#fef08a",
+    "300": "#fde047",
+    "400": "#facc15",
+    "500": "#eab308",
+    "600": "#ca8a04",
+    "700": "#a16207",
+    "800": "#854d0e",
+    "900": "#713f12",
+    "950": "#422006"
+  },
+  "zinc": {
+    "50": "#fafafa",
+    "100": "#f4f4f5",
+    "200": "#e4e4e7",
+    "300": "#d4d4d8",
+    "400": "#a1a1aa",
+    "500": "#71717a",
+    "600": "#52525b",
+    "700": "#3f3f46",
+    "800": "#27272a",
+    "900": "#18181b",
+    "950": "#000000"
+  }
+}

package/src/connector.js

@@ -0,0 +1,34 @@
+const LINE_TYPES = {
+	CHILD: 'child',
+	LAST: 'last',
+	SIBLING: 'sibling',
+	EMPTY: 'empty',
+	ICON: 'icon'
+}
+
+const nextType = {
+	[LINE_TYPES.CHILD]: LINE_TYPES.SIBLING,
+	[LINE_TYPES.LAST]: LINE_TYPES.EMPTY,
+	[LINE_TYPES.SIBLING]: LINE_TYPES.SIBLING,
+	[LINE_TYPES.EMPTY]: LINE_TYPES.EMPTY
+}
+
+/**
+ * Constructs an array of line types for tree visualization
+ * @param {boolean} hasChildren - Whether the node has children
+ * @param {import('./types').LineType[]} parentTypes - Types from parent nodes
+ * @param {import('./types').LineType} position - Current position type
+ * @returns {import('./types').LineType[]} Array of line types
+ */
+export function getLineTypes(hasChildren = false, parentTypes = [], position = LINE_TYPES.CHILD) {
+	return parentTypes
+		.reduce((acc, type, index) => {
+			// For all but the last parent type, convert to next type
+			if (index < parentTypes.length - 1) {
+				return [...acc, nextType[type]]
+			}
+			// For the last parent type, use the position
+			return [...acc, position]
+		}, [])
+		.concat(hasChildren ? LINE_TYPES.ICON : LINE_TYPES.EMPTY)
+}

package/src/constants.js

@@ -1,102 +1,170 @@
-export const defaultIcons = [
+export { defaultColors, syntaxColors, shades, defaultPalette } from './colors/index'
+export const DATA_IMAGE_REGEX = /^data:image\/(jpeg|png|gif|bmp|webp|svg\+xml)/i
+
+// ─── Snippet names ────────────────────────────────────────────────────────────
+
+export const ITEM_SNIPPET = 'itemContent'
+export const GROUP_SNIPPET = 'groupContent'
+/**
+ * @deprecated Use BASE_FIELDS from @rokkit/core instead.
+ * Retained for legacy ListController/FieldMapper/Proxy consumers (Toolbar, Table).
+ * Will be removed when those components migrate to Wrapper+Navigator.
+ * @type {import('./types).FieldMapping} Fields
+ */
+export const DEFAULT_FIELDS = {
+	id: 'id',
+	href: 'href',
+	icon: 'icon',
+	text: 'text',
+	value: 'value',
+	keywords: 'keywords',
+	children: 'children',
+	iconPrefix: null,
+	image: 'image',
+	summary: 'summary',
+	notes: 'notes',
+	props: 'props',
+	target: 'target',
+	state: 'state',
+	level: 'level',
+	parent: 'parent',
+	currency: 'currency',
+	label: 'label',
+	component: 'component', // to be deprecated in favour of snippet
+	snippet: 'snippet',
+	disabled: 'disabled',
+	/* flag fields  */
+	deleted: '_deleted',
+	expanded: '_expanded',
+	selected: '_selected'
+}
+
+// ─── BASE_FIELDS ─────────────────────────────────────────────────────────────
+// Canonical field mapping for ProxyItem and all Wrapper+Navigator components.
+// Semantic keys map to common raw data keys for backward compatibility.
+
+export const BASE_FIELDS = {
+	// Identity
+	id: 'id',
+	value: 'value',
+	// Display
+	label: 'label',
+	icon: 'icon',
+	avatar: 'image',
+	subtext: 'description',
+	tooltip: 'title',
+	badge: 'badge',
+	shortcut: 'shortcut',
+	// Structure
+	children: 'children',
+	type: 'type',
+	snippet: 'snippet',
+	href: 'href',
+	hrefTarget: 'target',
+	// State
+	disabled: 'disabled',
+	expanded: 'expanded',
+	selected: 'selected'
+}
+
+const LEGACY_KEY_MAP = {
+	description: 'subtext',
+	title: 'tooltip',
+	image: 'avatar',
+	target: 'hrefTarget'
+}
+
+/**
+ * Remap legacy field-override keys to their BASE_FIELDS semantic equivalents.
+ * e.g. { text: 'name' } → { label: 'name' }
+ *
+ * @param {Record<string, string> | null | undefined} fields
+ * @returns {Record<string, string>}
+ */
+export function normalizeFields(fields) {
+	if (!fields || typeof fields !== 'object') return {}
+	const result = {}
+	for (const [key, value] of Object.entries(fields)) {
+		result[LEGACY_KEY_MAP[key] ?? key] = value
+	}
+	return result
+}
+
+export const DEFAULT_ICONS = [
 	'accordion-opened',
 	'accordion-closed',
 	'action-remove',
+	'action-cancel',
+	'action-retry',
 	'action-add',
 	'action-clear',
 	'action-search',
 	'action-close',
-	'action-close-filled',
+	'action-copy',
+	'action-copysuccess',
+	'action-check',
+	'action-pin',
+	'action-save',
+	'action-unpin',
 	'node-opened',
 	'node-closed',
+	'folder-opened',
+	'folder-closed',
 	'selector-opened',
 	'selector-closed',
+	'menu-opened',
+	'menu-closed',
 	'checkbox-checked',
 	'checkbox-unchecked',
 	'checkbox-unknown',
 	'rating-filled',
 	'rating-empty',
+	'rating-half',
 	'radio-off',
 	'radio-on',
 	'mode-dark',
 	'mode-light',
+	'mode-system',
 	'navigate-left',
 	'navigate-right',
 	'navigate-up',
-	'navigate-down'
+	'navigate-down',
+	'palette-hex',
+	'palette-presets',
+	'state-error',
+	'state-warning',
+	'state-success',
+	'state-info',
+	'state-unknown',
+	'badge-fail',
+	'badge-warn',
+	'badge-pass',
+	'badge-unknown',
+	'sort-none',
+	'sort-ascending',
+	'sort-descending',
+	'validity-failed',
+	'validity-passed',
+	'validity-unknown',
+	'validity-warning',
+	'alert-clear',
+	'alert-unread',
+	'align-horizontal-left',
+	'align-horizontal-right',
+	'align-horizontal-center',
+	'align-vertical-top',
+	'align-vertical-bottom',
+	'align-vertical-middle'
 ]
 
-// export const defaultIcons = [
-// 	'accordion-opened',
-// 	'accordion-closed',
-// 	'action-remove',
-// 	'action-add',
-// 	'action-clear',
-// 	'action-search',
-// 	'action-close',
-// 	'node-opened',
-// 	'node-closed',
-// 	'checkbox-checked',
-// 	'checkbox-unchecked',
-// 	'checkbox-unknown',
-// 	'rating-filled',
-// 	'rating-empty',
-// 	'rating-half',
-// 	'radio-off',
-// 	'radio-on',
-// 	'folder-closed',
-// 	'folder-opened',
-// 	'navigate-up',
-// 	'navigate-down',
-// 	'navigate-left',
-// 	'navigate-right',
-// 	'selector-closed',
-// 	'selector-opened',
-// 	'mode-dark',
-// 	'mode-light'
-// ]
-
-export const defaultOptions = {
+export const DEFAULT_OPTIONS = {
 	id: 'id',
 	label: 'label',
 	value: 'value',
 	checked: 'checked'
 }
 
-/**
- * Structure to map custom fields for rendering
- *
- * @typedef FieldMapping
- * @property {string} [id='id']              - Unique id for the item
- * @property {string} [text='text']          - Attribute to identify the text to render
- * @property {string} [url='url']            - Attribute to identify a URL
- * @property {string} [icon='icon']          - Attribute to identify an icon class to render
- * @property {string} [image='image']        - Attribute to identify an image to render
- * @property {string} [children='children']  - Attribute to identify children of the current item
- * @property {string} [summary='summary']
- * @property {string} [notes='notes']
- * @property {string} [props='props']
- * @property {string} [isOpen='_open']       - Attribute to identify if the current item is open
- * @property {string} [isDeleted='_deleted'] - Attribute to identify if the current item is deleted
- * @property {FieldMapping} [fields]         - Field mapping to be used on children in the next level
- */
-export const defaultFields = {
-	id: 'id',
-	url: 'url',
-	text: 'text',
-	children: 'data',
-	icon: 'icon',
-	image: 'image',
-	component: 'component',
-	summary: 'summary',
-	notes: 'notes',
-	props: 'props',
-	target: 'target',
-	isOpen: '_open',
-	isDeleted: '_deleted'
-}
-
-export const defaultKeyMap = {
+export const DEFAULT_KEYMAP = {
 	ArrowRight: 'open',
 	ArrowLeft: 'close',
 	ArrowDown: 'down',
@@ -105,45 +173,56 @@ export const defaultKeyMap = {
 	Escape: 'deselect'
 }
 
+export const DEFAULT_THEME_MAPPING = {
+	surface: 'slate',
+	primary: 'orange',
+	secondary: 'pink',
+	accent: 'sky',
+	success: 'green',
+	warning: 'yellow',
+	danger: 'red',
+	error: 'red',
+	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
+}
+/**
+ * Splits an icon name into its group and key components.
+ * @param {string} name - The icon name to split.
+ * @returns {{ group: string, key: string, value: string }} An object containing the group, key, and value of the icon name.
+ */
+function splitIconName(name) {
+	const parts = name.split('-')
+	const group = parts.slice(0, parts.length - 1).join('-')
+	return { group, key: parts[parts.length - 1], value: name }
+}
+
+/**
+ * Generate a state icon mapping from a list of icon names
+ *
+ * @param {string[]} icons
+ * @returns {import('./types').StateIcons}
+ */
 export function stateIconsFromNames(icons) {
-	return icons
-		.map((k) => [...k.split('-')])
-		.reduce(
-			(acc, parts) => ({
-				...acc,
-				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
-			}),
-			{}
-		)
+	return icons.map(splitIconName).reduce(
+		(acc, { group, key, value }) => ({
+			...acc,
+			[group]: { ...acc[group], [key]: value }
+		}),
+		{}
+	)
 }
 
-export const defaultStateIcons = stateIconsFromNames(defaultIcons)
-// export const defaultStateIcons = {
-// 	accordion: {
-// 		opened: 'accordion-opened',
-// 		closed: 'accordion-closed'
-// 	},
-// 	item: {
-// 		remove: 'item-remove',
-// 		add: 'item-add',
-// 		clear: 'item-clear',
-// 		search: 'item-search'
-// 	},
-// 	node: {
-// 		opened: 'node-opened',
-// 		closed: 'node-closed'
-// 	},
-// 	list: {
-// 		selector: 'list-selector'
-// 	},
-// 	checkbox: {
-// 		checked: 'checkbox-checked',
-// 		unchecked: 'checkbox-unchecked',
-// 		unknown: 'checkbox-unknown'
-// 	},
-// 	rating: { filled: 'rating-filled', empty: 'rating-empty' },
-// 	radio: {
-// 		off: 'radio-off',
-// 		on: 'radio-on'
-// 	}
-// }
+export const DEFAULT_STATE_ICONS = stateIconsFromNames(DEFAULT_ICONS)

package/src/events.js

@@ -0,0 +1,32 @@
+import { noop } from './utils.js'
+
+/**
+ * Creates an emitter object from the given properties.
+ *
+ * - Filters attributes that start with 'on' and are functions,
+ * - Returns an object with keys that are the event names (without the 'on' prefix)
+ * - If a default event is not present in the props, it will be set to a no-op function.
+ *
+ * @param {Object}        props    - The properties object to filter.
+ * @param {Array<string>} defaults - An array of default events.
+ * @returns {import('./types.js').EventHandlers} The emitter object.
+ */
+export function createEmitter(props, defaults = []) {
+	const emit = {}
+
+	// Filter and add functions that start with 'on'
+	Object.entries(props)
+		.filter(([key, value]) => key.startsWith('on') && typeof value === 'function')
+		.forEach(([key, value]) => {
+			emit[key.slice(2)] = value
+		})
+
+	// Add default events with no-op function if not present
+	defaults.forEach((event) => {
+		if (!emit[event]) {
+			emit[event] = noop
+		}
+	})
+
+	return emit
+}