@astrake/lumora-ui 0.1.6 → 0.2.0

package/CHANGELOG.md

@@ -4,13 +4,58 @@
 
 ---
 
+## [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

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@astrake/lumora-ui",
-  "version": "0.1.6",
+  "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/LuInput.vue

@@ -1,5 +1,23 @@
 <template>
+  <div class="relative w-full" v-if="$slots.prepend || $slots.append">
+    <div v-if="$slots.prepend" :class="prependSkin">
+      <slot name="prepend" />
+    </div>
+    <input
+      v-bind="$attrs"
+      :class="[resolvedSkin, $slots.prepend && 'pl-9', $slots.append && 'pr-9']"
+      :value="modelValue"
+      :name="name"
+      :disabled="formContext?.disabled.value"
+      @input="onInput"
+      @blur="onBlur"
+    />
+    <div v-if="$slots.append" :class="appendSkin">
+      <slot name="append" />
+    </div>
+  </div>
   <input
+    v-else
     v-bind="$attrs"
     :class="resolvedSkin"
     :value="modelValue"
@@ -29,6 +47,8 @@ const emit = defineEmits<{
 
 const { resolveSkin } = useLumoraConfig();
 const resolvedSkin = computed(() => resolveSkin("LuInput", props.variant));
+const prependSkin = computed(() => resolveSkin("LuInputPrepend", props.variant));
+const appendSkin = computed(() => resolveSkin("LuInputAppend", props.variant));
 
 const formContext = inject(LuFormContextKey, null);
 const internalValue = ref<string | number | undefined>(props.modelValue);

package/src/components/LuMenu.vue

@@ -0,0 +1,86 @@
+<template>
+  <div :class="resolvedSkin" ref="dropdownRef">
+    <div @click="toggle" :class="resolvedTriggerSkin" aria-haspopup="true" :aria-expanded="isOpen">
+      <slot name="trigger">
+        <LuButton variant="default">Options <LuIcon name="chevron-down" class="ml-2 h-4 w-4" /></LuButton>
+      </slot>
+    </div>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div v-if="isOpen" :class="[resolvedContentSkin, alignClass]">
+        <div :class="resolvedGroupSkin" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+          <slot />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { useLumoraConfig } from "../context";
+import LuButton from "./LuButton.vue";
+import LuIcon from "./LuIcon.vue";
+
+const props = withDefaults(defineProps<{
+  variant?: string;
+  align?: 'left' | 'right';
+}>(), {
+  align: 'left'
+});
+
+const emit = defineEmits<{
+  (e: "open"): void;
+  (e: "close"): void;
+}>();
+
+const isOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuMenu", props.variant));
+const resolvedTriggerSkin = computed(() => resolveSkin("LuMenuTrigger", props.variant));
+const resolvedContentSkin = computed(() => resolveSkin("LuMenuContent", props.variant));
+const resolvedGroupSkin = computed(() => resolveSkin("LuMenuGroup", props.variant));
+
+const alignClass = computed(() => {
+  return props.align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left';
+});
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    emit("open");
+  } else {
+    emit("close");
+  }
+};
+
+const close = () => {
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit("close");
+  }
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    close();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>

package/src/components/LuMenuItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <button
+    type="button"
+    :class="resolvedSkin"
+    role="menuitem"
+    :disabled="disabled"
+    :data-disabled="disabled ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  variant?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuMenuItem", props.variant));
+
+const onClick = (event: MouseEvent) => {
+  if (props.disabled) {
+    event.preventDefault();
+    return;
+  }
+  emit("click", event);
+};
+</script>