@uniweb/kit 0.4.12 → 0.5.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
     "./styled": "./src/styled/index.js",
     "./styles": "./src/styles/index.css",
-    "./search": "./src/search/index.js"
+    "./search": "./src/search/index.js",
+    "./theme-tokens.css": "./src/theme-tokens.css"
   },
   "files": [
     "src",
@@ -39,7 +40,7 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.3.10"
+    "@uniweb/core": "0.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/DataPlaceholder.jsx

@@ -0,0 +1,28 @@
+/**
+ * DataPlaceholder
+ *
+ * Default loading UI for components waiting on runtime data.
+ * Renders an animated pulse placeholder.
+ *
+ * @example
+ * import { DataPlaceholder } from '@uniweb/kit'
+ *
+ * function ArticleList({ content, block }) {
+ *   if (block.dataLoading) return <DataPlaceholder />
+ *   return <ArticleGrid articles={content.data.articles} />
+ * }
+ */
+export function DataPlaceholder({ lines = 3, className = '' }) {
+  return (
+    <div className={`animate-pulse space-y-4 py-8 ${className}`} role="status" aria-label="Loading">
+      {Array.from({ length: lines }, (_, i) => (
+        <div key={i} className="h-4 rounded" style={{
+          backgroundColor: 'var(--border, #e5e7eb)',
+          width: i === lines - 1 ? '60%' : '100%',
+        }} />
+      ))}
+    </div>
+  )
+}
+
+export default DataPlaceholder

package/src/components/Icon/Icon.jsx

@@ -12,7 +12,7 @@
 
 import React, { useState, useEffect, useMemo } from 'react'
 import { getUniweb } from '@uniweb/core'
-import { cn } from '../../utils/index.js'
+import { cn, parseIconRef } from '../../utils/index.js'
 
 /**
  * Built-in demo icons (simple SVG paths)
@@ -138,11 +138,13 @@ export function Icon({
   errorComponent,
   ...props
 }) {
-  // Normalize props (handle legacy icon object)
-  const iconLibrary = library || (typeof icon === 'object' ? icon.library : null)
-  const iconUrl = url || (typeof icon === 'string' ? icon : icon?.url)
+  // Normalize props — handle icon as string ref ("lu-house", "lu:house"),
+  // object ({ library, name }), or URL
+  const parsedRef = typeof icon === 'string' ? parseIconRef(icon) : null
+  const iconLibrary = library || parsedRef?.library || (typeof icon === 'object' ? icon.library : null)
+  const iconName = name || parsedRef?.name || (typeof icon === 'object' ? icon.name : null)
+  const iconUrl = url || (!parsedRef && typeof icon === 'string' ? icon : icon?.url)
   const iconSvg = svg || (typeof icon === 'object' ? icon.svg : null)
-  const iconName = name || (typeof icon === 'object' ? icon.name : null)
 
   // Check sync cache for SSR (pre-populated by prerender)
   const cachedSvg = useMemo(() => {

package/src/index.js

@@ -46,6 +46,9 @@ export { MediaIcon } from './components/MediaIcon/index.js'
 // Files (plain version - for styled card, use @uniweb/kit/tailwind)
 export { Asset } from './components/Asset/index.js'
 
+// Data loading
+export { DataPlaceholder } from './components/DataPlaceholder.jsx'
+
 // Social
 export {
   SocialIcon,
@@ -95,6 +98,7 @@ export {
   isExternalUrl,
   isFileUrl,
   detectMediaType,
+  parseIconRef,
   // Locale utilities
   LOCALE_DISPLAY_NAMES,
   getLocaleLabel

package/src/theme-tokens.css

@@ -0,0 +1,97 @@
+/*
+ * Standard Theme Tokens for Tailwind v4
+ *
+ * Import this in your foundation's styles.css to register theme CSS variables
+ * with Tailwind, enabling utility classes like `text-heading`, `bg-surface`, etc.
+ *
+ * Usage:
+ *   @import "tailwindcss";
+ *   @import "@uniweb/kit/theme-tokens.css";
+ *
+ * The actual values come from the build system's theme CSS (injected at runtime).
+ * The build generates short names (--primary-600, --heading) and this file bridges
+ * them to the --color-* namespace that Tailwind v4 expects for utility classes.
+ *
+ * Foundations that want custom Tailwind names can skip this import and declare
+ * their own @theme inline block.
+ */
+
+@theme inline {
+  /* ── Semantic tokens ── */
+  /* Values come from theme CSS context classes (light/medium/dark) */
+  --color-heading: var(--heading);
+  --color-surface: var(--bg);
+  --color-surface-subtle: var(--bg-subtle);
+  --color-surface-muted: var(--bg-muted);
+  --color-body: var(--text);
+  --color-muted: var(--text-muted);
+  --color-subtle: var(--text-subtle);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-edge: var(--border);
+  --color-edge-muted: var(--border-muted);
+  --color-ring: var(--ring);
+  --color-btn-primary: var(--btn-primary-bg);
+  --color-btn-primary-text: var(--btn-primary-text);
+  --color-btn-primary-hover: var(--btn-primary-hover);
+  --color-btn-secondary: var(--btn-secondary-bg);
+  --color-btn-secondary-text: var(--btn-secondary-text);
+  --color-btn-secondary-hover: var(--btn-secondary-hover);
+
+  /* ── Primary palette ── */
+  --color-primary-50: var(--primary-50, #eff6ff);
+  --color-primary-100: var(--primary-100, #dbeafe);
+  --color-primary-200: var(--primary-200, #bfdbfe);
+  --color-primary-300: var(--primary-300, #93c5fd);
+  --color-primary-400: var(--primary-400, #60a5fa);
+  --color-primary-500: var(--primary-500, #3b82f6);
+  --color-primary-600: var(--primary-600, #2563eb);
+  --color-primary-700: var(--primary-700, #1d4ed8);
+  --color-primary-800: var(--primary-800, #1e40af);
+  --color-primary-900: var(--primary-900, #1e3a8a);
+  --color-primary-950: var(--primary-950, #172554);
+
+  /* ── Secondary palette ── */
+  --color-secondary-50: var(--secondary-50, #f8fafc);
+  --color-secondary-100: var(--secondary-100, #f1f5f9);
+  --color-secondary-200: var(--secondary-200, #e2e8f0);
+  --color-secondary-300: var(--secondary-300, #cbd5e1);
+  --color-secondary-400: var(--secondary-400, #94a3b8);
+  --color-secondary-500: var(--secondary-500, #64748b);
+  --color-secondary-600: var(--secondary-600, #475569);
+  --color-secondary-700: var(--secondary-700, #334155);
+  --color-secondary-800: var(--secondary-800, #1e293b);
+  --color-secondary-900: var(--secondary-900, #0f172a);
+  --color-secondary-950: var(--secondary-950, #020617);
+
+  /* ── Accent palette ── */
+  --color-accent-50: var(--accent-50, #f5f3ff);
+  --color-accent-100: var(--accent-100, #ede9fe);
+  --color-accent-200: var(--accent-200, #ddd6fe);
+  --color-accent-300: var(--accent-300, #c4b5fd);
+  --color-accent-400: var(--accent-400, #a78bfa);
+  --color-accent-500: var(--accent-500, #8b5cf6);
+  --color-accent-600: var(--accent-600, #7c3aed);
+  --color-accent-700: var(--accent-700, #6d28d9);
+  --color-accent-800: var(--accent-800, #5b21b6);
+  --color-accent-900: var(--accent-900, #4c1d95);
+  --color-accent-950: var(--accent-950, #2e1065);
+
+  /* ── Neutral palette ── */
+  --color-neutral-50: var(--neutral-50, #fafafa);
+  --color-neutral-100: var(--neutral-100, #f4f4f5);
+  --color-neutral-200: var(--neutral-200, #e4e4e7);
+  --color-neutral-300: var(--neutral-300, #d4d4d8);
+  --color-neutral-400: var(--neutral-400, #a1a1aa);
+  --color-neutral-500: var(--neutral-500, #71717a);
+  --color-neutral-600: var(--neutral-600, #52525b);
+  --color-neutral-700: var(--neutral-700, #3f3f46);
+  --color-neutral-800: var(--neutral-800, #27272a);
+  --color-neutral-900: var(--neutral-900, #18181b);
+  --color-neutral-950: var(--neutral-950, #09090b);
+
+  /* ── Brand shorthands ── */
+  --color-primary: var(--primary-500, #3b82f6);
+  --color-secondary: var(--secondary-500, #64748b);
+  --color-accent: var(--accent-500, #8b5cf6);
+}

package/src/utils/index.js

@@ -78,6 +78,65 @@ export function getLocaleLabel(locale) {
   return locale.label || LOCALE_DISPLAY_NAMES[locale.code] || locale.code.toUpperCase()
 }
 
+// ─────────────────────────────────────────────────────────────────
+// Icon Utilities
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * Short icon family codes (2-3 chars) used for dash-format parsing.
+ * Matches the content-reader's ICON_FAMILIES_SHORT list.
+ */
+const ICON_SHORT_CODES = [
+  'lu', 'hi', 'hi2', 'pi', 'tb', 'fi', 'bs', 'md', 'ai',
+  'ri', 'si', 'io5', 'bi', 'vsc', 'wi', 'gi', 'fa', 'fa6'
+]
+
+const ICON_SHORT_CODE_SET = new Set(ICON_SHORT_CODES)
+
+/**
+ * Parse an icon reference string into { library, name }.
+ *
+ * Accepts all standard icon formats:
+ * - Dash format:  "lu-house", "hi2-arrow-right"
+ * - Colon format: "lu:house", "lucide:house"
+ *
+ * Returns null if the string doesn't match any known format.
+ *
+ * @param {string} ref - Icon reference string
+ * @returns {{ library: string, name: string } | null}
+ *
+ * @example
+ * parseIconRef('lu-house')       // { library: 'lu', name: 'house' }
+ * parseIconRef('lu:house')       // { library: 'lu', name: 'house' }
+ * parseIconRef('lucide:house')   // { library: 'lucide', name: 'house' }
+ * parseIconRef('not-an-icon')    // null
+ */
+export function parseIconRef(ref) {
+  if (!ref || typeof ref !== 'string') return null
+
+  // Colon format: "lu:house", "lucide:house"
+  const colonIdx = ref.indexOf(':')
+  if (colonIdx > 0) {
+    return { library: ref.slice(0, colonIdx), name: ref.slice(colonIdx + 1) }
+  }
+
+  // Dash format: "lu-house" — only short codes (2-3 chars) to avoid
+  // ambiguity with regular hyphenated strings
+  const dashIdx = ref.indexOf('-')
+  if (dashIdx > 0) {
+    const prefix = ref.slice(0, dashIdx)
+    if (ICON_SHORT_CODE_SET.has(prefix)) {
+      return { library: prefix, name: ref.slice(dashIdx + 1) }
+    }
+  }
+
+  return null
+}
+
+// ─────────────────────────────────────────────────────────────────
+// Class / String Utilities
+// ─────────────────────────────────────────────────────────────────
+
 /**
  * Merge class names with Tailwind CSS conflict resolution
  * @param {...string} classes - Class names to merge