@astrake/lumora-ui 0.1.5 → 0.2.0

package/src/layout/LuFill.vue

@@ -1,17 +1,27 @@
 <template>
-  <div v-bind="$attrs" :class="resolvedSkin">
+  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
     <slot />
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLumoraConfig } from "../context";
+import { resolveLayoutProps, cn } from "../utils";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   variant?: string;
-}>();
+  as?: string;
+  width?: string;
+  height?: string;
+  padding?: string | number;
+}>(), {
+  as: 'div'
+});
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuFill", props.variant));
+const resolvedSkin = computed(() => cn(
+  resolveSkin("LuFill", props.variant),
+  resolveLayoutProps(props)
+));
 </script>

package/src/layout/LuFixed.vue

@@ -1,17 +1,27 @@
 <template>
-  <div v-bind="$attrs" :class="resolvedSkin">
+  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
     <slot />
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLumoraConfig } from "../context";
+import { resolveLayoutProps, cn } from "../utils";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   variant?: string;
-}>();
+  as?: string;
+  width?: string;
+  height?: string;
+  padding?: string | number;
+}>(), {
+  as: 'div'
+});
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuFixed", props.variant));
+const resolvedSkin = computed(() => cn(
+  resolveSkin("LuFixed", props.variant),
+  resolveLayoutProps(props)
+));
 </script>

package/src/layout/LuGrid.vue

@@ -1,20 +1,43 @@
 <template>
-  <div v-bind="$attrs" :class="resolvedSkin" :style="gridStyle">
+  <component :is="as" v-bind="$attrs" :class="resolvedSkin" :style="gridStyle">
     <slot />
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLumoraConfig } from "../context";
+import { resolveLayoutProps, cn } from "../utils";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   cols?: number;
+  smCols?: number;
+  mdCols?: number;
+  lgCols?: number;
   variant?: string;
-}>();
+  as?: string;
+  gap?: string | number;
+  padding?: string | number;
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+}>(), {
+  as: 'div'
+});
+
+const colsClass = computed(() => {
+  const map: Record<number, string> = {1:'grid-cols-1',2:'grid-cols-2',3:'grid-cols-3',4:'grid-cols-4',5:'grid-cols-5',6:'grid-cols-6',12:'grid-cols-12'};
+  const sm = props.smCols && map[props.smCols] ? `sm:${map[props.smCols]}` : '';
+  const md = props.mdCols && map[props.mdCols] ? `md:${map[props.mdCols]}` : '';
+  const lg = props.lgCols && map[props.lgCols] ? `lg:${map[props.lgCols]}` : '';
+  return [sm, md, lg].filter(Boolean).join(' ');
+});
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuGrid", props.variant) || "grid");
+const resolvedSkin = computed(() => cn(
+  resolveSkin("LuGrid", props.variant),
+  resolveLayoutProps(props),
+  colsClass.value
+));
 
 const gridStyle = computed(() => 
   props.cols ? { gridTemplateColumns: `repeat(${props.cols}, minmax(0, 1fr))` } : {}

package/src/layout/LuScroll.vue

@@ -13,5 +13,7 @@ const props = defineProps<{
 }>();
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuScroll", props.variant));
+const resolvedSkin = computed(() => [
+  resolveSkin("LuScroll", props.variant)
+]);
 </script>

package/src/layout/LuSplitPane.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, unref, type Ref } from "vue";
 import { useLumoraConfig } from "../context";
 
 const props = defineProps<{
@@ -15,13 +15,13 @@ const props = defineProps<{
   variant?: string;
 }>();
 
-const direction = inject<"horizontal" | "vertical">("lu-split-direction", "horizontal");
+const direction = inject<Ref<"horizontal" | "vertical"> | "horizontal">("lu-split-direction", "horizontal");
 const size = ref(props.defaultSize);
 
 const style = computed(() => {
   if (size.value === undefined) return { flex: "1 1 0%" };
   const dim = `${size.value}px`;
-  return direction === "horizontal"
+  return unref(direction) === "horizontal"
     ? { width: dim, flex: `0 0 ${dim}` }
     : { height: dim, flex: `0 0 ${dim}` };
 });

package/src/layout/LuSplitResizer.vue

@@ -3,15 +3,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from "vue";
+import { computed, inject, unref, type Ref } from "vue";
 import { useLumoraConfig } from "../context";
 
 const props = defineProps<{
   variant?: string;
 }>();
 
-const direction = inject<"horizontal" | "vertical">("lu-split-direction", "horizontal");
+const direction = inject<Ref<"horizontal" | "vertical"> | "horizontal">("lu-split-direction", "horizontal");
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuSplitResizer", direction === "horizontal" ? "horizontal" : "vertical"));
+const resolvedSkin = computed(() => [
+  resolveSkin("LuSplitResizer", unref(direction) === "horizontal" ? "horizontal" : "vertical")
+]);
 </script>

package/src/layout/LuStack.vue

@@ -1,24 +1,29 @@
 <template>
-  <div v-bind="$attrs" :class="resolvedSkin">
+  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
     <slot />
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLumoraConfig } from "../context";
+import { resolveLayoutProps, cn } from "../utils";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   direction?: "vertical" | "horizontal";
   variant?: string;
-}>();
+  as?: string;
+  gap?: string | number;
+  padding?: string | number;
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+}>(), {
+  as: 'div'
+});
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => {
-  const base = resolveSkin("LuStack", props.variant);
-  let extra = "";
-  if (props.direction === "vertical") extra = " flex-col";
-  if (props.direction === "horizontal") extra = " flex-row";
-  return base + extra;
-});
+const resolvedSkin = computed(() => cn(
+  resolveSkin("LuStack", props.direction ?? props.variant),
+  resolveLayoutProps(props)
+));
 </script>

package/src/lumora.css

@@ -0,0 +1,16 @@
+/* LumoraUI structural baseline — Tailwind v4 Escape Hatch, v0.1.7+ */
+/* Consumers MUST import this: import '@astrake/lumora-ui/style' */
+
+/* 
+  With the transition to Tailwind v4 as the native design engine, 
+  all structural layout classes (e.g., .lu-button, .lu-stack) have been removed.
+  Layout structure is now provided by the defaultSkin (`default.ts`) out of the box.
+
+  This file serves as an escape hatch for:
+  1. Complex [data-state="..."] selector combinations.
+  2. Webkit scrollbar pseudoclasses.
+  3. Keyframe animations that Tailwind v4 cannot natively express.
+*/
+
+/* Example: Webkit Scrollbar overrides can go here */
+

package/src/plugin.ts

@@ -1,4 +1,5 @@
 import type { App, Plugin } from "vue";
+import { shallowReactive } from "vue";
 import { LumoraUIConfigKey } from "./context";
 import type { LumoraUIConfig } from "./types";
 
@@ -9,13 +10,13 @@ export interface LumoraUIPluginOptions extends LumoraUIConfig {
 export function createLumoraUI(options: LumoraUIPluginOptions = {}): Plugin {
   return {
     install(app: App) {
-      const config: LumoraUIConfig = {
+      const config = shallowReactive<LumoraUIConfig>({
         target: options.target ?? "desktop",
         skin: options.skin,
         locale: options.locale ?? "en-US",
         a11y: options.a11y ?? true,
         icons: options.icons,
-      };
+      });
 
       app.provide(LumoraUIConfigKey, config);
 

package/src/shell/desktop/LuDesktopRailItem.vue

@@ -18,6 +18,6 @@ const props = defineProps<{ variant?: string; active?: boolean }>();
 const { resolveSkin } = useLumoraConfig();
 const resolvedSkin = computed(() => resolveSkin("LuDesktopRailItem", props.variant));
 const activeSkin = computed(() => resolveSkin("LuDesktopRailItem", "active"));
-const iconSkin = computed(() => resolveSkin("LuDesktopRailItemIcon", props.variant) || "flex-shrink-0 flex items-center justify-center w-6 h-6");
-const labelSkin = computed(() => resolveSkin("LuDesktopRailItemLabel", props.variant) || "overflow-hidden transition-all duration-200");
+const iconSkin = computed(() => resolveSkin("LuDesktopRailItemIcon", props.variant));
+const labelSkin = computed(() => resolveSkin("LuDesktopRailItemLabel", props.variant));
 </script>

package/src/shell/desktop/LuDesktopShell.vue

@@ -19,7 +19,7 @@ import { useLumoraConfig } from "../../context";
 const props = defineProps<{ variant?: string }>();
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDesktopShell", props.variant) || "flex flex-col h-screen w-screen overflow-hidden bg-white");
-const contentWrapperSkin = computed(() => resolveSkin("LuDesktopShellContentWrapper") || "flex flex-1 overflow-hidden");
-const mainContentSkin = computed(() => resolveSkin("LuDesktopShellMainContent") || "flex flex-1 flex-col overflow-hidden relative");
+const resolvedSkin = computed(() => resolveSkin("LuDesktopShell", props.variant));
+const contentWrapperSkin = computed(() => resolveSkin("LuDesktopShellContentWrapper"));
+const mainContentSkin = computed(() => resolveSkin("LuDesktopShellMainContent"));
 </script>

package/src/shell/embedded/LuEmbeddedShell.vue

@@ -15,6 +15,6 @@ import { useLumoraConfig } from "../../context";
 const props = defineProps<{ variant?: string }>();
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuEmbeddedShell", props.variant) || "flex flex-col h-screen w-screen overflow-hidden bg-black text-white touch-none select-none");
-const contentSkin = computed(() => resolveSkin("LuEmbeddedShellContent", props.variant) || "flex-1 min-h-0 min-w-0 flex flex-col relative overflow-hidden");
+const resolvedSkin = computed(() => resolveSkin("LuEmbeddedShell", props.variant));
+const contentSkin = computed(() => resolveSkin("LuEmbeddedShellContent", props.variant));
 </script>

package/src/shell/embedded/LuEmbeddedStatusBar.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <slot name="left" />
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../../context";
+
+const props = defineProps<{ variant?: string }>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuEmbeddedStatusBar", props.variant));
+</script>

package/src/shell/embedded/LuEmbeddedTopBar.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <slot name="left" />
+    <slot />
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../../context";
+
+const props = defineProps<{ variant?: string }>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuEmbeddedTopBar", props.variant));
+</script>

package/src/shell/index.ts

@@ -6,5 +6,8 @@ export { default as LuDesktopSidebar } from "./desktop/LuDesktopSidebar.vue";
 export { default as LuDesktopStatusBar } from "./desktop/LuDesktopStatusBar.vue";
 
 export { default as LuMobileShell } from "./mobile/LuMobileShell.vue";
-
+export { default as LuMobileHeader } from "./mobile/LuMobileHeader.vue";
+export { default as LuMobileNavBar } from "./mobile/LuMobileNavBar.vue";
 export { default as LuEmbeddedShell } from "./embedded/LuEmbeddedShell.vue";
+export { default as LuEmbeddedTopBar } from "./embedded/LuEmbeddedTopBar.vue";
+export { default as LuEmbeddedStatusBar } from "./embedded/LuEmbeddedStatusBar.vue";

package/src/shell/mobile/LuMobileHeader.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <slot name="left" />
+    <slot />
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../../context";
+
+const props = defineProps<{ variant?: string }>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuMobileHeader", props.variant));
+</script>

package/src/shell/mobile/LuMobileNavBar.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../../context";
+
+const props = defineProps<{ variant?: string }>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuMobileNavBar", props.variant));
+</script>

package/src/shell/mobile/LuMobileShell.vue

@@ -16,6 +16,6 @@ import { useLumoraConfig } from "../../context";
 const props = defineProps<{ variant?: string }>();
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuMobileShell", props.variant) || "flex flex-col h-full w-full overflow-hidden bg-white relative");
-const contentSkin = computed(() => resolveSkin("LuMobileShellContent") || "flex flex-1 flex-col overflow-y-auto relative");
+const resolvedSkin = computed(() => resolveSkin("LuMobileShell", props.variant));
+const contentSkin = computed(() => resolveSkin("LuMobileShellContent"));
 </script>