@rokkit/core 1.0.0-next.16 → 1.0.0-next.160

package/README.md

@@ -1 +1,121 @@
-# Core Components
+# @rokkit/core
+
+Core utilities for the Rokkit design system — field mapping, constants, calendar, color palette, and event utilities.
+
+## Install
+
+```sh
+npm install @rokkit/core
+# or
+bun add @rokkit/core
+```
+
+## Overview
+
+`@rokkit/core` is the foundation layer shared across all Rokkit packages. It provides:
+
+- **Field mapping** — map arbitrary data object shapes to semantic field names
+- **Constants** — `BASE_FIELDS`, `DEFAULT_STATE_ICONS`, `DEFAULT_KEYMAP`, and more
+- **Color palette** — default colors, shades, and theme color mapping
+- **Calendar utilities** — calendar day generation and weekday labels
+- **Event utilities** — lightweight emitter factory
+- **Direction detection** — RTL/LTR helpers
+- **Tick generation** — axis tick utilities for chart packages
+
+No runtime dependencies on other `@rokkit/*` packages.
+
+## Usage
+
+### Field mapping
+
+`FieldMapper` maps semantic field names (`label`, `value`, `icon`, etc.) to the actual keys present in your data objects. Pass a fields override to adapt any data shape.
+
+```js
+import { FieldMapper } from '@rokkit/core'
+
+const mapper = new FieldMapper({ label: 'name', value: 'id', icon: 'iconClass' })
+
+const item = { id: 42, name: 'Settings', iconClass: 'i-settings' }
+
+mapper.get('label', item) // 'Settings'
+mapper.get('value', item) // 42
+mapper.get('icon', item) // 'i-settings'
+```
+
+### normalizeFields
+
+Merge user-supplied field overrides with `BASE_FIELDS` defaults, remapping any legacy key names automatically.
+
+```js
+import { normalizeFields, BASE_FIELDS } from '@rokkit/core'
+
+const fields = normalizeFields({ label: 'title', value: 'slug' })
+// { label: 'title', value: 'slug', icon: 'icon', children: 'children', ... }
+```
+
+### BASE_FIELDS reference
+
+```js
+import { BASE_FIELDS } from '@rokkit/core'
+
+// {
+//   id: 'id',         value: 'value',       label: 'label',
+//   icon: 'icon',     avatar: 'image',       subtext: 'description',
+//   tooltip: 'title', badge: 'badge',        shortcut: 'shortcut',
+//   children: 'children',  type: 'type',    snippet: 'snippet',
+//   href: 'href',     hrefTarget: 'target',
+//   disabled: 'disabled',  expanded: 'expanded', selected: 'selected'
+// }
+```
+
+### Event emitter
+
+```js
+import { createEmitter } from '@rokkit/core'
+
+const emitter = createEmitter()
+emitter.on('select', (item) => console.log('selected', item))
+emitter.emit('select', myItem)
+```
+
+### Calendar utilities
+
+```js
+import { getCalendarDays, weekdays } from '@rokkit/core'
+
+const days = getCalendarDays(2025, 2) // February 2025
+// weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+```
+
+### Tick generation
+
+```js
+import { generateTicks } from '@rokkit/core'
+
+const ticks = generateTicks(0, 100, 5)
+// [0, 25, 50, 75, 100]
+```
+
+## API
+
+| Export                           | Description                                                   |
+| -------------------------------- | ------------------------------------------------------------- |
+| `BASE_FIELDS`                    | Canonical semantic-to-data-key field mapping                  |
+| `normalizeFields(fields)`        | Merge overrides with BASE_FIELDS defaults                     |
+| `FieldMapper`                    | Class that resolves semantic field reads from data objects    |
+| `DEFAULT_STATE_ICONS`            | Icon name map grouped by category (action, state, sort, etc.) |
+| `DEFAULT_KEYMAP`                 | Default keyboard navigation key mapping                       |
+| `DEFAULT_THEME_MAPPING`          | Default semantic color → palette color mapping                |
+| `createEmitter()`                | Lightweight event emitter factory                             |
+| `getCalendarDays(year, month)`   | Calendar day array for a given month                          |
+| `weekdays`                       | Localized weekday label array                                 |
+| `generateTicks(min, max, count)` | Evenly spaced axis tick values                                |
+| `defaultColors`                  | Default color palette array                                   |
+| `shades`                         | Available shade scale values                                  |
+| `ITEM_SNIPPET`                   | Constant: default item snippet key (`'itemContent'`)          |
+| `GROUP_SNIPPET`                  | Constant: default group snippet key (`'groupContent'`)        |
+| `stateIconsFromNames(names)`     | Build a state icon map from an array of icon name strings     |
+
+---
+
+Part of [Rokkit](https://github.com/jerrythomas/rokkit) — a Svelte 5 component library and design system.

package/package.json

@@ -1,59 +1,51 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.16",
-  "description": "Core components, actions and stores for svelte apps.",
+  "version": "1.0.0-next.160",
+  "description": "Contains core utility functions and classes that can be used in various components.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jerrythomas/rokkit.git"
+  },
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "main": "index.js",
-  "svelte": "src/index.js",
-  "module": "src/index.js",
-  "types": "dist/index.d.ts",
   "type": "module",
-  "prettier": "@jerrythomas/prettier-config",
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@jerrythomas/eslint-config-svelte": "^1.0.2",
-    "@jerrythomas/prettier-config": "^1.0.0",
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/coverage-istanbul": "^0.28.5",
-    "@vitest/ui": "~0.12.10",
-    "eslint": "^7.32.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
-    "typescript": "^4.9.5",
-    "validators": "latest",
-    "vite": "^4.1.1",
-    "vitest": "~0.19.1",
-    "shared-config": "1.0.0"
+  "scripts": {
+    "prepublishOnly": "cp ../../LICENSE . && bunx tsc --project tsconfig.build.json",
+    "postpublish": "rm -f LICENSE",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
-    "src/**/*.svelte",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "src/**/*.ts",
+    "src/**/*.json",
+    "dist/**/*.d.ts",
+    "README.md",
+    "package.json",
+    "LICENSE"
   ],
   "exports": {
     "./src": "./src",
     "./package.json": "./package.json",
-    "./stores": "./src/stores/index.js",
-    "./actions": "./src/actions/index.js",
-    "./constants": "./src/constants.js",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./src/index.js"
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./src/vite/index.js"
     }
   },
-  "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
-    "test:ct": "playwright test -c playwright.config.js",
-    "test:ci": "vitest run",
-    "test:ui": "vitest --ui",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+  "dependencies": {
+    "@unocss/preset-mini": "^66.6.1",
+    "date-fns": "^4.1.0",
+    "ramda": "^0.32.0"
+  },
+  "devDependencies": {
+    "@rokkit/icons": "1.0.0-next.160"
   }
-}
+}

package/src/calendar.js

@@ -0,0 +1,44 @@
+import { getDay, getMonth, getYear, getDaysInMonth, format, isWeekend } from 'date-fns'
+
+export const weekdays = [
+	'Sunday',
+	'Monday',
+	'Tuesday',
+	'Wednesday',
+	'Thursday',
+	'Friday',
+	'Saturday'
+]
+
+/**
+ * Get the days in the month.
+ *
+ * @param {Date}    value
+ * @param {Array}   holidays
+ * @param {boolean} fixed
+ * @returns {import('./types').CalendarDay[]}
+ */
+export function getCalendarDays(value, holidays = [], fixed = false) {
+	const month = getMonth(value)
+	const year = getYear(value)
+	const offset = getDay(new Date(year, month, 1)) + 1
+
+	holidays = holidays.map((x) => format(new Date(x), 'yyyy-MMM-dd'))
+	let days = Array.from({ length: getDaysInMonth(value) }, (_, i) => ({
+		day: i + 1,
+		offset: i === 0 ? offset : 0,
+		date: new Date(year, month, i + 1)
+	})).map((x) => ({
+		...x,
+		text: format(x.date, 'yyyy-MMM-dd'),
+		weekend: isWeekend(x.date),
+		holiday: holidays.includes(format(x.date, 'yyyy-MMM-dd'))
+	}))
+
+	if (fixed && days[0].offset > 4) {
+		const n = 5 * 7 - days[0].offset
+		days = [...days.slice(n + 1), ...days.slice(0, n + 1)]
+	}
+
+	return days
+}

package/src/colors/extra.json

@@ -0,0 +1,16 @@
+{
+  "shark": {
+    "DEFAULT": "#828C9F",
+    "50": "#ffffff",
+    "100": "#efefef",
+    "200": "#E0E0E0",
+    "300": "#C1C6D0",
+    "400": "#828C9F",
+    "500": "#677287",
+    "600": "#51596A",
+    "700": "#3B414D",
+    "800": "#2E323C",
+    "900": "#20242A",
+    "950": "#1A1C22"
+  }
+}

package/src/colors/index.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { colors } from '@unocss/preset-mini/colors'
+import type { PresetMiniColors } from '@unocss/preset-mini/colors'
+import syntaxColorPalette from './syntax.json' with { type: 'json' }
+import extraColors from './extra.json' with { type: 'json' }
+
+export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+export const defaultPalette = [
+	'surface',
+	'primary',
+	'secondary',
+	'accent',
+	'success',
+	'warning',
+	'danger',
+	'info'
+]
+
+export const syntaxColors = syntaxColorPalette
+export const defaultColors: PresetMiniColors & typeof extraColors = {
+	...colors,
+	...extraColors
+}

package/src/colors/syntax.json

@@ -0,0 +1,42 @@
+{
+  "one-dark": {
+    "dark": {
+      "--tab-size": "2",
+      "--code-fill": "var(--surface-100)",
+      "--code-normal": "#e06c75",
+      "--code-string": "#98c379",
+      "--code-number": "#d19a66",
+      "--code-atrule": "var(--code-string)",
+      "--code-keyword": "#c678dd",
+      "--code-comment": "#5c6370",
+      "--code-property": "#d19a66",
+      "--code-selector": "var(--code-keyword)",
+      "--code-operator": "#56b6c2",
+      "--code-function": "#61afef",
+      "--code-gutter-marker": "black",
+      "--code-gutter-z2": "#999",
+      "--code-cursor": "#24292e",
+      "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
+      "--code-linenumbers": "rgba(27, 31, 35, 0.3)"
+    },
+    "light": {
+      "--tab-size": "2",
+      "--code-fill": "var(--surface-100)",
+      "--code-normal": "#333333",
+      "--code-string": "#9D8248",
+      "--code-number": "#71A15D",
+      "--code-atrule": "var(--code-string)",
+      "--code-keyword": "#3080B5",
+      "--code-comment": "#969896",
+      "--code-property": "#63a35c",
+      "--code-selector": "var(--code-keyword)",
+      "--code-operator": "#bf5625",
+      "--code-function": "#a71d5d",
+      "--code-gutter-marker": "black",
+      "--code-gutter-z2": "#999",
+      "--code-cursor": "#24292e",
+      "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
+      "--code-linenumbers": "rgba(27, 31, 35, 0.3)"
+    }
+  }
+}

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)
+}