@astrake/lumora-ui 0.1.5 → 0.2.0

package/CHANGELOG.md

@@ -4,13 +4,77 @@
 
 ---
 
+## [0.2.0] — 2026-04-27
+
+### Maintenance
+
+- bump version to 0.2.0 (`d52e5c1`)
+
+
+---
+
+## [0.2.0] — 2026-04-27
+
+### Added
+- `LuCodeBlock` — Native Shiki-powered syntax highlighter with `default` and `preview` variants (supporting `tabbed` and `split` layouts).
+- `LuToggleGroup` & `LuToggleButton` — New layout primitives for grouped button selections.
+- `LuMenu` — Refactored and renamed from legacy `LuDropdown` to align with the core primitives naming convention.
+- New showcase documentation dedicated to Toggle Group and components.
+
+### Fixed
+- WPF-like edge-docking regressions in `LuDock` via a newly implemented programmatic render function.
+- Reactivity bugs in `LuSplit` (`LuSplitPane`, `LuSplitResizer`) failing to unwrap injected `direction` refs.
+- Missing `LuSplit` component skins.
+- Various visual hierarchy issues in documentation via typography `LuText` adjustments.
+
+### Changed
+- **Zero-Raw-HTML Adherence**: Removed all raw DOM nodes (`div`, `span`, etc.) and `PreviewBlock` from the showcase application in favor of 100% native `Lu*` primitives. 
+- Integrated Shiki to `@astrake/lumora-ui` core package dependencies.
+
+---
+
+## [0.1.7] — 2026-04-26
+
+### Breaking Changes (structurally additive — no API surface removed)
+- Framework now ships `lumora.css` — consumers must add `import '@astrake/lumora-ui/style'` to their app entry
+
+### Fixed
+- Shell components (`LuDesktopShell`, `LuMobileShell`, `LuEmbeddedShell`) no longer require Tailwind CSS to be configured for `node_modules` — structural layout is now framework-owned CSS
+- Layout primitives (`LuDock`, `LuStack`, `LuFill`, `LuScroll`, `LuGrid`, etc.) structural classes are now framework-owned, not Tailwind fallbacks
+- `LuDesktopRailItem` icon and label structural defaults are now framework-owned
+- Plugin config is now `shallowReactive` — dynamic skin switching and `config.skin = newSkin` mutations now correctly trigger reactive re-renders in all components
+
+### Added
+- `lumora.css` — zero-dependency CSS baseline for all structural/layout defaults; exported at `@astrake/lumora-ui/style`
+- `tailwindContent()` helper exported at `@astrake/lumora-ui/tailwind` — resolves correct `node_modules` source glob for Tailwind `content` config
+
+---
+
+## [0.1.6] — 2026-04-25
+
+### Maintenance
+
+- bump version to 0.1.6 - add LuForm validation orchestrator (`1f11734`)
+
+---
+
+## [0.1.6] — 2026-04-26
+
+### Added
+- `LuForm` — headless validation orchestrator component with slot-based API
+- `LuForm.types.ts` — `LuFormRules`, `LuFormErrors`, `LuFormValidator`, `LuFormContext` types
+- Form context integration for `LuInput`, `LuSelect`, `LuSwitch` — `name`, `error` props; register/unregister lifecycle
+- `LuFormContextKey` injection key (internal Symbol) for child-field coordination
+- 10 vitest test cases covering submit, validation, reset, blur, disabled, and programmatic API
+
+---
+
 ## [0.1.5] — 2026-04-25
 
 ### Fixed
 
 - ci workflow errors — npm publish auth and correct artifact path (`af81e69`)
 
-
 ---
 
 ## [0.1.4] — 2026-04-25

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@astrake/lumora-ui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Headless Vue 3 component framework for three surface targets — Mobile, Desktop, and Embedded — with a unified --lu-* design token system.",
   "author": "Anuvab Chakraborty (https://github.com/madlybong)",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
+    "./style": "./src/lumora.css",
+    "./tailwind": "./src/tailwind.ts",
     "./layout": "./src/layout/index.ts",
     "./shell": "./src/shell/index.ts",
     "./components": "./src/components/index.ts",
@@ -56,6 +58,12 @@
     "check": "vue-tsc -p ./tsconfig.json"
   },
   "peerDependencies": {
+    "tailwindcss": "^4.0.0",
     "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0"
   }
 }

package/src/components/LuAlert.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :class="resolvedSkin" role="alert">
+    <div v-if="$slots.icon || icon" :class="resolvedIconWrapperSkin">
+      <slot name="icon">
+        <LuIcon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <div :class="resolvedContentSkin">
+      <slot />
+    </div>
+    <div v-if="$slots.action" :class="resolvedActionSkin">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuIcon from "./LuIcon.vue";
+
+const props = defineProps<{
+  variant?: string;
+  icon?: string;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuAlert", props.variant));
+const resolvedIconWrapperSkin = computed(() => resolveSkin("LuAlertIcon", props.variant));
+const resolvedContentSkin = computed(() => resolveSkin("LuAlertContent", props.variant));
+const resolvedActionSkin = computed(() => resolveSkin("LuAlertAction", props.variant));
+</script>

package/src/components/LuBreadcrumb.vue

@@ -0,0 +1,63 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ol :class="resolvedSkin">
+      <li v-for="(item, index) in items" :key="index" :class="resolvedItemSkin">
+        <LuLink
+          v-if="item.href || item.to"
+          :href="item.href"
+          :to="item.to"
+          :variant="item.current ? 'nav-active' : 'nav'"
+          :aria-current="item.current ? 'page' : undefined"
+          :class="resolvedLinkSkin"
+        >
+          <LuIcon v-if="item.icon" :name="item.icon" class="mr-2 h-4 w-4" />
+          {{ item.label }}
+        </LuLink>
+        <span
+          v-else
+          :class="resolvedPageSkin"
+          :aria-current="item.current ? 'page' : undefined"
+        >
+          <LuIcon v-if="item.icon" :name="item.icon" class="mr-2 h-4 w-4" />
+          {{ item.label }}
+        </span>
+        <LuIcon
+          v-if="index < items.length - 1"
+          :name="separatorIcon"
+          :class="resolvedSeparatorSkin"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuLink from "./LuLink.vue";
+import LuIcon from "./LuIcon.vue";
+
+export interface LuBreadcrumbItem {
+  label: string;
+  href?: string;
+  to?: any;
+  current?: boolean;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<{
+  items: LuBreadcrumbItem[];
+  variant?: string;
+  separatorIcon?: string;
+}>(), {
+  separatorIcon: 'chevron-right'
+});
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuBreadcrumb", props.variant));
+const resolvedItemSkin = computed(() => resolveSkin("LuBreadcrumbItem", props.variant));
+const resolvedLinkSkin = computed(() => resolveSkin("LuBreadcrumbLink", props.variant));
+const resolvedPageSkin = computed(() => resolveSkin("LuBreadcrumbPage", props.variant));
+const resolvedSeparatorSkin = computed(() => resolveSkin("LuBreadcrumbSeparator", props.variant));
+</script>

package/src/components/LuCard.vue

@@ -7,14 +7,21 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLumoraConfig } from "../context";
+import { resolveLayoutProps, cn } from "../utils";
 
 const props = withDefaults(defineProps<{
   variant?: string;
   as?: string;
+  padding?: string | number;
+  width?: string;
+  height?: string;
 }>(), {
   as: "div"
 });
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuCard", props.variant));
+const resolvedSkin = computed(() => cn(
+  resolveSkin("LuCard", props.variant),
+  resolveLayoutProps(props)
+));
 </script>

package/src/components/LuCheckbox.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :class="resolvedContainerSkin">
+    <input
+      type="checkbox"
+      v-bind="$attrs"
+      :class="resolvedSkin"
+      :checked="modelValue"
+      :name="name"
+      :disabled="formContext?.disabled.value"
+      @change="onChange"
+      @blur="onBlur"
+    />
+    <label v-if="$slots.default || label" :class="resolvedLabelSkin" @click.prevent="toggle">
+      <slot>{{ label }}</slot>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+import { useLumoraConfig } from "../context";
+import { LuFormContextKey } from "./LuForm.types";
+
+const props = defineProps<{
+  modelValue?: boolean;
+  variant?: string;
+  name?: string;
+  label?: string;
+  error?: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "change", value: boolean): void;
+  (e: "blur"): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedContainerSkin = computed(() => resolveSkin("LuCheckboxContainer", props.variant));
+const resolvedSkin = computed(() => resolveSkin("LuCheckbox", props.variant));
+const resolvedLabelSkin = computed(() => resolveSkin("LuCheckboxLabel", props.variant));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<boolean>(!!props.modelValue);
+
+watch(() => props.modelValue, (newVal) => {
+  internalValue.value = !!newVal;
+});
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.checked;
+  internalValue.value = value;
+  emit("update:modelValue", value);
+  emit("change", value);
+  
+  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
+    // trigger validation handled by parent
+  }
+};
+
+const toggle = () => {
+  if (formContext?.disabled.value || ("disabled" in props && (props as any).disabled !== false)) return;
+  const newValue = !internalValue.value;
+  internalValue.value = newValue;
+  emit("update:modelValue", newValue);
+  emit("change", newValue);
+  
+  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
+    // trigger validation handled by parent
+  }
+};
+
+const onBlur = () => {
+  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
+    // trigger validation handled by parent
+  }
+  emit("blur");
+};
+
+onMounted(() => {
+  if (!props.name || !formContext) return;
+  formContext.register({
+    name: props.name,
+    getValue: () => internalValue.value,
+    setValue: (v) => { internalValue.value = !!v; },
+    setError: (_msg) => {},
+  });
+});
+
+onUnmounted(() => {
+  if (props.name && formContext) formContext.unregister(props.name);
+});
+</script>

package/src/components/LuCodeBlock.vue

@@ -0,0 +1,168 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin.container">
+    <div v-if="title || description" :class="resolvedSkin.header">
+      <h3 v-if="title" :class="resolvedSkin.title">{{ title }}</h3>
+      <p v-if="description" :class="resolvedSkin.description">{{ description }}</p>
+    </div>
+
+    <template v-if="variant === 'preview'">
+      <div :class="resolvedSkin.card">
+        <template v-if="layout === 'tabbed'">
+          <LuTabs v-model="activeTab" variant="default">
+            <LuTabList variant="card-header">
+              <LuTab value="preview">Preview</LuTab>
+              <LuTab value="code">Code</LuTab>
+            </LuTabList>
+          </LuTabs>
+
+          <div v-if="activeTab === 'preview'" :class="resolvedSkin.previewArea">
+            <slot name="preview" />
+          </div>
+
+          <div v-if="activeTab === 'code'" :class="resolvedSkin.codeArea">
+            <div :class="resolvedSkin.codeHeader">
+              <div :class="resolvedSkin.badge">{{ lang }}</div>
+              <button @click="copyCode" :class="resolvedSkin.copyButton" aria-label="Copy code">
+                <LuIcon :name="copied ? 'check' : 'copy'" class="w-4 h-4" />
+              </button>
+            </div>
+            <div :class="resolvedSkin.codeContent" v-html="html"></div>
+          </div>
+        </template>
+
+        <template v-else-if="layout === 'split'">
+          <div :class="resolvedSkin.splitContainer">
+            <div :class="resolvedSkin.previewArea">
+              <slot name="preview" />
+            </div>
+            <div :class="resolvedSkin.splitCodeArea">
+              <div :class="resolvedSkin.codeHeader">
+                <div :class="resolvedSkin.badge">{{ lang }}</div>
+                <button @click="copyCode" :class="resolvedSkin.copyButton" aria-label="Copy code">
+                  <LuIcon :name="copied ? 'check' : 'copy'" class="w-4 h-4" />
+                </button>
+              </div>
+              <div :class="resolvedSkin.codeContent" v-html="html"></div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <template v-else>
+      <div :class="resolvedSkin.card">
+        <div :class="resolvedSkin.codeArea">
+          <div :class="resolvedSkin.codeHeader">
+            <div :class="resolvedSkin.badge">{{ lang }}</div>
+            <button @click="copyCode" :class="resolvedSkin.copyButton" aria-label="Copy code">
+              <LuIcon :name="copied ? 'check' : 'copy'" class="w-4 h-4" />
+            </button>
+          </div>
+          <div :class="resolvedSkin.codeContent" v-html="html"></div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { createHighlighter, type Highlighter } from 'shiki';
+
+let globalHighlighter: Highlighter | null = null;
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+async function getHighlighter() {
+  if (globalHighlighter) return globalHighlighter;
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['one-dark-pro'],
+      langs: ['bash', 'vue', 'ts', 'html', 'css', 'json']
+    });
+  }
+  globalHighlighter = await highlighterPromise;
+  return globalHighlighter;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuTabs from "./LuTabs.vue";
+import LuTabList from "./LuTabList.vue";
+import LuTab from "./LuTab.vue";
+import LuIcon from "./LuIcon.vue";
+
+const props = withDefaults(defineProps<{
+  code: string;
+  lang?: string;
+  variant?: "default" | "preview";
+  layout?: "tabbed" | "split";
+  title?: string;
+  description?: string;
+}>(), {
+  lang: "vue",
+  variant: "default",
+  layout: "tabbed"
+});
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => {
+  return {
+    container: resolveSkin("LuCodeBlock", "container"),
+    header: resolveSkin("LuCodeBlock", "header"),
+    title: resolveSkin("LuCodeBlock", "title"),
+    description: resolveSkin("LuCodeBlock", "description"),
+    card: resolveSkin("LuCodeBlock", "card"),
+    previewArea: resolveSkin("LuCodeBlock", "previewArea"),
+    codeArea: resolveSkin("LuCodeBlock", "codeArea"),
+    splitCodeArea: resolveSkin("LuCodeBlock", "splitCodeArea"),
+    splitContainer: resolveSkin("LuCodeBlock", "splitContainer"),
+    codeHeader: resolveSkin("LuCodeBlock", "codeHeader"),
+    badge: resolveSkin("LuCodeBlock", "badge"),
+    copyButton: resolveSkin("LuCodeBlock", "copyButton"),
+    codeContent: resolveSkin("LuCodeBlock", "codeContent"),
+  };
+});
+
+const html = ref('');
+const activeTab = ref<'preview' | 'code'>('preview');
+const copied = ref(false);
+
+const highlight = async () => {
+  if (!props.code) {
+    html.value = '';
+    return;
+  }
+  
+  try {
+    const highlighter = await getHighlighter();
+    
+    html.value = highlighter.codeToHtml(props.code, {
+      lang: props.lang || 'vue',
+      theme: 'one-dark-pro'
+    });
+  } catch (e) {
+    console.error('Failed to highlight code', e);
+    // fallback to plain pre
+    html.value = `<pre><code>${props.code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
+  }
+};
+
+onMounted(() => {
+  highlight();
+});
+
+watch(() => [props.code, props.lang], () => {
+  highlight();
+});
+
+const copyCode = async () => {
+  try {
+    await navigator.clipboard.writeText(props.code);
+    copied.value = true;
+    setTimeout(() => copied.value = false, 2000);
+  } catch (err) {
+    console.error('Failed to copy', err);
+  }
+};
+</script>

package/src/components/LuForm.types.ts

@@ -0,0 +1,24 @@
+import type { InjectionKey, Ref } from "vue";
+
+export type LuFormValidator = (value: unknown) => string | null | Promise<string | null>;
+
+export type LuFormRules = Record<string, LuFormValidator | LuFormValidator[]>;
+
+export type LuFormErrors = Record<string, string>;
+
+export interface LuFormFieldRegistration {
+  name: string;
+  getValue: () => unknown;
+  setValue: (v: unknown) => void;
+  setError: (msg: string | null) => void;
+}
+
+export const LuFormContextKey = Symbol("LuFormContext") as InjectionKey<LuFormContext>;
+
+export interface LuFormContext {
+  register(field: LuFormFieldRegistration): void;
+  unregister(name: string): void;
+  getError(name: string): string | null;
+  validateOn: Readonly<Ref<"submit" | "blur" | "both">>;
+  disabled: Readonly<Ref<boolean>>;
+}

package/src/components/LuForm.vue

@@ -0,0 +1,121 @@
+<template>
+  <form @submit.prevent="handleSubmit" @reset.prevent="handleReset">
+    <slot />
+    <slot
+      name="errors"
+      :errors="errors"
+      :has-errors="hasErrors"
+    />
+    <slot
+      name="actions"
+      :submit="handleSubmit"
+      :reset="handleReset"
+      :pending="pending"
+    />
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, provide, readonly } from "vue";
+import type { LuFormRules, LuFormErrors, LuFormFieldRegistration, LuFormContext } from "./LuForm.types";
+import { LuFormContextKey } from "./LuForm.types";
+
+const props = withDefaults(defineProps<{
+  rules?: LuFormRules;
+  validateOn?: "submit" | "blur" | "both";
+  resetOnSubmit?: boolean;
+  disabled?: boolean;
+}>(), {
+  rules: () => ({}),
+  validateOn: "submit",
+  resetOnSubmit: false,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  (e: "submit", values: Record<string, unknown>): void;
+  (e: "reset"): void;
+  (e: "error", errors: LuFormErrors): void;
+}>();
+
+const fields = new Map<string, LuFormFieldRegistration>();
+const errors = ref<LuFormErrors>({});
+const pending = ref(false);
+const hasErrors = computed(() => Object.keys(errors.value).length > 0);
+
+async function validate(): Promise<boolean> {
+  const nextErrors: LuFormErrors = {};
+
+  for (const [name, field] of fields) {
+    const rule = props.rules?.[name];
+    if (!rule) continue;
+
+    const validators = Array.isArray(rule) ? rule : [rule];
+    const value = field.getValue();
+
+    for (const validator of validators) {
+      const result = await validator(value);
+      if (result) {
+        nextErrors[name] = result;
+        field.setError(result);
+        break;
+      } else {
+        field.setError(null);
+      }
+    }
+  }
+
+  errors.value = nextErrors;
+  return Object.keys(nextErrors).length === 0;
+}
+
+async function handleSubmit() {
+  pending.value = true;
+  try {
+    const valid = await validate();
+    if (!valid) {
+      emit("error", errors.value);
+      return;
+    }
+    const values: Record<string, unknown> = {};
+    for (const [name, field] of fields) {
+      values[name] = field.getValue();
+    }
+    emit("submit", values);
+    if (props.resetOnSubmit) handleReset();
+  } finally {
+    pending.value = false;
+  }
+}
+
+function handleReset() {
+  errors.value = {};
+  for (const field of fields.values()) {
+    field.setValue(undefined);
+    field.setError(null);
+  }
+  emit("reset");
+}
+
+const context: LuFormContext = {
+  register(field) { fields.set(field.name, field); },
+  unregister(name) { fields.delete(name); },
+  getError(name) { return errors.value[name] ?? null; },
+  validateOn: computed(() => props.validateOn),
+  disabled: computed(() => props.disabled),
+};
+
+provide(LuFormContextKey, context);
+
+defineExpose({
+  submit: handleSubmit,
+  reset: handleReset,
+  errors: readonly(errors),
+  pending: readonly(pending),
+  values: computed(() => {
+    const v: Record<string, unknown> = {};
+    for (const [name, field] of fields) v[name] = field.getValue();
+    return v;
+  }),
+});
+</script>