@astrake/lumora-ui 0.1.0

package/src/components/LuText.vue

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

package/src/components/LuThemeSelect.vue

@@ -0,0 +1,26 @@
+<template>
+  <LuSelect
+    :model-value="mode"
+    variant="theme"
+    :options="options"
+    v-bind="$attrs"
+    @update:model-value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import LuSelect from "./LuSelect.vue";
+import { useTheme, type ThemeMode } from "../composables/useTheme";
+
+const { mode, setMode } = useTheme();
+
+const options = [
+  { value: "system", label: "System" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+];
+
+const onChange = (val: string) => {
+  setMode(val as ThemeMode);
+};
+</script>

package/src/components/LuThemeSwitch.vue

@@ -0,0 +1,22 @@
+<template>
+  <LuSwitch
+    :model-value="isDark"
+    variant="theme"
+    v-bind="$attrs"
+    @update:model-value="onToggle"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import LuSwitch from "./LuSwitch.vue";
+import { useTheme } from "../composables/useTheme";
+
+const { resolved, setMode } = useTheme();
+
+const isDark = computed(() => resolved.value === "dark");
+
+const onToggle = (val: boolean) => {
+  setMode(val ? "dark" : "light");
+};
+</script>

package/src/components/LuTooltip.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-bind="$attrs" :class="containerSkin" @mouseenter="onEnter" @mouseleave="onLeave">
+    <slot name="trigger" />
+    <div v-if="isVisible" :class="contentSkin">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{ variant?: string; position?: "top" | "bottom" | "left" | "right"; delay?: number }>();
+
+const isVisible = ref(false);
+let timeout: ReturnType<typeof setTimeout> | null = null;
+
+const onEnter = () => {
+  if (timeout) clearTimeout(timeout);
+  if (props.delay) {
+    timeout = setTimeout(() => isVisible.value = true, props.delay);
+  } else {
+    isVisible.value = true;
+  }
+};
+
+const onLeave = () => {
+  if (timeout) clearTimeout(timeout);
+  isVisible.value = false;
+};
+
+const { resolveSkin } = useLumoraConfig();
+const containerSkin = computed(() => resolveSkin("LuTooltip", props.variant));
+const contentSkin = computed(() => resolveSkin("LuTooltipContent", props.position ?? props.variant));
+</script>

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export { default as LuButton } from "./LuButton.vue";
+export { default as LuInput } from "./LuInput.vue";
+export { default as LuIcon } from "./LuIcon.vue";
+export { default as LuText } from "./LuText.vue";
+export { default as LuSwitch } from "./LuSwitch.vue";
+export { default as LuSelect } from "./LuSelect.vue";
+export { default as LuThemeSwitch } from "./LuThemeSwitch.vue";
+export { default as LuThemeSelect } from "./LuThemeSelect.vue";
+export { default as LuTabs } from "./LuTabs.vue";
+export { default as LuTabList } from "./LuTabList.vue";
+export { default as LuTab } from "./LuTab.vue";
+export { default as LuTabPanel } from "./LuTabPanel.vue";
+export { default as LuBadge } from "./LuBadge.vue";
+export { default as LuProgressBar } from "./LuProgressBar.vue";
+export { default as LuTooltip } from "./LuTooltip.vue";
+export { default as LuCollapsible } from "./LuCollapsible.vue";
+export { default as LuAvatar } from "./LuAvatar.vue";
+export { default as LuLink } from "./LuLink.vue";
+export { default as LuDivider } from "./LuDivider.vue";
+export { default as LuPageHeader } from "./LuPageHeader.vue";
+export { default as LuCard } from "./LuCard.vue";
+export { default as LuTable } from "./LuTable.vue";
+export { default as LuTableHead } from "./LuTableHead.vue";
+export { default as LuTableBody } from "./LuTableBody.vue";
+export { default as LuTableRow } from "./LuTableRow.vue";
+export { default as LuTableHeadCell } from "./LuTableHeadCell.vue";
+export { default as LuTableCell } from "./LuTableCell.vue";

package/src/composables/index.ts

@@ -0,0 +1,4 @@
+export { useRail } from "./useRail";
+export { useSplit } from "./useSplit";
+export { useTheme, type ThemeMode, type ResolvedTheme } from "./useTheme";
+// useLumoraConfig is exported from context.ts

package/src/composables/useRail.ts

@@ -0,0 +1,24 @@
+import { ref, readonly } from "vue";
+
+export function useRail(defaultExpanded = false) {
+  const isExpanded = ref(defaultExpanded);
+
+  function toggle() {
+    isExpanded.value = !isExpanded.value;
+  }
+
+  function expand() {
+    isExpanded.value = true;
+  }
+
+  function collapse() {
+    isExpanded.value = false;
+  }
+
+  return {
+    isExpanded: readonly(isExpanded),
+    toggle,
+    expand,
+    collapse,
+  };
+}

package/src/composables/useSplit.ts

@@ -0,0 +1,17 @@
+import { ref, type Ref } from "vue";
+
+export function useSplit(
+  containerRef: Ref<HTMLElement | null>,
+  direction: "horizontal" | "vertical" = "horizontal",
+  onResize?: (sizes: number[]) => void
+) {
+  const isDragging = ref(false);
+
+  // Simplified split drag logic hook.
+  // In a real implementation, this would attach mousedown to resizers,
+  // and mousemove/mouseup to the window, updating the size of adjacent panes.
+  
+  return {
+    isDragging,
+  };
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,36 @@
+import { ref, computed, watchEffect } from "vue";
+
+export type ThemeMode = "system" | "light" | "dark";
+export type ResolvedTheme = "light" | "dark";
+
+// Global state for the theme
+const mode = ref<ThemeMode>("system");
+const systemPrefersDark = ref(false);
+
+// Update system preference when window matches change
+if (typeof window !== "undefined") {
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  systemPrefersDark.value = mediaQuery.matches;
+  mediaQuery.addEventListener("change", (e) => {
+    systemPrefersDark.value = e.matches;
+  });
+}
+
+const resolved = computed<ResolvedTheme>(() => {
+  if (mode.value === "system") {
+    return systemPrefersDark.value ? "dark" : "light";
+  }
+  return mode.value;
+});
+
+export function useTheme() {
+  const setMode = (newMode: ThemeMode) => {
+    mode.value = newMode;
+  };
+
+  return {
+    mode,
+    resolved,
+    setMode,
+  };
+}

package/src/context.ts

@@ -0,0 +1,36 @@
+import { inject, isRef, type InjectionKey, type Component } from "vue";
+import type { LumoraUIConfig, SkinMap } from "./types";
+
+export const LumoraUIConfigKey: InjectionKey<LumoraUIConfig> = Symbol("LumoraUIConfig");
+
+export function useLumoraConfig() {
+  const config = inject(LumoraUIConfigKey, {});
+
+  const resolveSkin = (componentName: string, variant?: string): string => {
+    if (!config.skin) return "";
+    
+    // Unwrap the skin map if it's a ref
+    const skinMap = isRef(config.skin) ? config.skin.value : config.skin;
+    if (!skinMap) return "";
+
+    const componentSkin = skinMap[componentName];
+    if (!componentSkin) return "";
+
+    const classes: string[] = [];
+    if (componentSkin.default) {
+      classes.push(componentSkin.default);
+    }
+    if (variant && componentSkin[variant]) {
+      classes.push(componentSkin[variant] as string);
+    }
+
+    return classes.join(" ");
+  };
+
+  const resolveIcon = (name: string, size?: number): Component | null => {
+    if (!config.icons) return null;
+    return config.icons(name, size);
+  };
+
+  return { config, resolveSkin, resolveIcon };
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./types";
+export * from "./context";
+export * from "./plugin";
+
+export * from "./layout/index";
+export * from "./shell/index";
+export * from "./components/index";
+export * from "./skins/index";

package/src/layout/LuDock.vue

@@ -0,0 +1,23 @@
+<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<{
+  direction?: "vertical" | "horizontal";
+  variant?: string;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() =>
+  resolveSkin("LuDock", props.direction ?? props.variant) ||
+  (props.direction === "horizontal"
+    ? "flex flex-row h-full w-full overflow-hidden"
+    : "flex flex-col h-full w-full overflow-hidden")
+);
+</script>

package/src/layout/LuDockItem.vue

@@ -0,0 +1,18 @@
+<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<{
+  dock?: "top" | "bottom" | "left" | "right" | "fill";
+  variant?: string;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuDockItem", props.dock ?? props.variant));
+</script>

package/src/layout/LuFill.vue

@@ -0,0 +1,17 @@
+<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("LuFill", props.variant));
+</script>

package/src/layout/LuFixed.vue

@@ -0,0 +1,17 @@
+<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("LuFixed", props.variant));
+</script>

package/src/layout/LuGrid.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin" :style="gridStyle">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  cols?: number;
+  variant?: string;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuGrid", props.variant) || "grid");
+
+const gridStyle = computed(() => 
+  props.cols ? { gridTemplateColumns: `repeat(${props.cols}, minmax(0, 1fr))` } : {}
+);
+</script>

package/src/layout/LuOverlay.vue

@@ -0,0 +1,17 @@
+<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("LuOverlay", props.variant));
+</script>

package/src/layout/LuScroll.vue

@@ -0,0 +1,17 @@
+<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("LuScroll", props.variant));
+</script>

package/src/layout/LuSplit.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin" ref="splitRef">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref, readonly } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  direction?: "horizontal" | "vertical";
+  variant?: string;
+}>();
+
+const direction = computed(() => props.direction ?? "horizontal");
+provide("lu-split-direction", readonly(direction));
+
+const splitRef = ref<HTMLElement | null>(null);
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuSplit", props.direction ?? props.variant));
+</script>

package/src/layout/LuSplitPane.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  minSize?: number;
+  maxSize?: number;
+  defaultSize?: number;
+  variant?: string;
+}>();
+
+const direction = inject<"horizontal" | "vertical">("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"
+    ? { width: dim, flex: `0 0 ${dim}` }
+    : { height: dim, flex: `0 0 ${dim}` };
+});
+
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuSplitPane", props.variant));
+</script>

package/src/layout/LuSplitResizer.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  variant?: string;
+}>();
+
+const direction = inject<"horizontal" | "vertical">("lu-split-direction", "horizontal");
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuSplitResizer", direction === "horizontal" ? "horizontal" : "vertical"));
+</script>

package/src/layout/LuStack.vue

@@ -0,0 +1,24 @@
+<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<{
+  direction?: "vertical" | "horizontal";
+  variant?: string;
+}>();
+
+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;
+});
+</script>

package/src/layout/index.ts

@@ -0,0 +1,25 @@
+import LuStack from "./LuStack.vue";
+import LuGrid from "./LuGrid.vue";
+import LuDock from "./LuDock.vue";
+import LuDockItem from "./LuDockItem.vue";
+import LuSplit from "./LuSplit.vue";
+import LuSplitPane from "./LuSplitPane.vue";
+import LuSplitResizer from "./LuSplitResizer.vue";
+import LuScroll from "./LuScroll.vue";
+import LuFill from "./LuFill.vue";
+import LuFixed from "./LuFixed.vue";
+import LuOverlay from "./LuOverlay.vue";
+
+export {
+  LuStack,
+  LuGrid,
+  LuDock,
+  LuDockItem,
+  LuSplit,
+  LuSplitPane,
+  LuSplitResizer,
+  LuScroll,
+  LuFill,
+  LuFixed,
+  LuOverlay,
+};

package/src/plugin.ts

@@ -0,0 +1,27 @@
+import type { App, Plugin } from "vue";
+import { LumoraUIConfigKey } from "./context";
+import type { LumoraUIConfig } from "./types";
+
+export interface LumoraUIPluginOptions extends LumoraUIConfig {
+  global?: boolean;
+}
+
+export function createLumoraUI(options: LumoraUIPluginOptions = {}): Plugin {
+  return {
+    install(app: App) {
+      const config: LumoraUIConfig = {
+        target: options.target ?? "desktop",
+        skin: options.skin,
+        locale: options.locale ?? "en-US",
+        a11y: options.a11y ?? true,
+        icons: options.icons,
+      };
+
+      app.provide(LumoraUIConfigKey, config);
+
+      if (options.global) {
+        // TODO: globally register all components if requested
+      }
+    },
+  };
+}

package/src/shell/desktop/LuDesktopRailBar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-bind="$attrs" :class="[resolvedSkin, isExpanded ? expandedSkin : '']" @mouseenter="onHover(true)" @mouseleave="onHover(false)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useLumoraConfig } from "../../context";
+
+const props = defineProps<{ variant?: string; expanded?: boolean; expandOnHover?: boolean }>();
+
+const hovered = ref(false);
+const isExpanded = computed(() => props.expanded || (props.expandOnHover && hovered.value));
+
+const onHover = (val: boolean) => {
+  hovered.value = val;
+};
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuDesktopRailBar", props.variant));
+const expandedSkin = computed(() => resolveSkin("LuDesktopRailBar", "expanded"));
+</script>

package/src/shell/desktop/LuDesktopRailItem.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-bind="$attrs" :class="[resolvedSkin, active ? activeSkin : '']">
+    <div :class="iconSkin">
+      <slot name="icon" />
+    </div>
+    <div v-if="$slots.default" :class="labelSkin">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../../context";
+
+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");
+</script>

package/src/shell/desktop/LuDesktopShell.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <slot name="topbar" />
+    <div :class="contentWrapperSkin">
+      <slot name="rail" />
+      <slot name="sidebar" />
+      <div :class="mainContentSkin">
+        <slot name="content" />
+      </div>
+    </div>
+    <slot name="statusbar" />
+  </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("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");
+</script>