rimelight-components 2.1.85 → 2.1.87

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.85",
+  "version": "2.1.87",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.1.85";
+const version = "2.1.87";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

package/dist/runtime/components/page/PageEditor.vue

@@ -56,7 +56,7 @@ const pageEditorStyles = tv({
     title: "",
     surroundSkeleton: "grid grid-cols-1 gap-md sm:grid-cols-2",
     skeleton: "h-48 w-full rounded-xl",
-    metadata: "flex flex-col gap-xs text-xs text-dimmed p-xl",
+    metadata: "flex flex-col gap-xs text-xs text-dimmed p-lg",
     resizer: "relative flex flex-col items-center justify-center w-6 cursor-col-resize group px-1 py-16",
     previewColumn: "h-full overflow-y-auto"
   }
@@ -286,8 +286,8 @@ const handleTreeNavigate = (slug) => {
     </UHeader>
   </RCHeaderLayer>
 
-  <div 
-    ref="split-container" 
+  <div
+    ref="split-container"
     :class="splitContainer({ class: rc.splitContainer })"
     :style="{ height: `calc(100vh - ${totalHeight}px)` }"
   >

package/dist/runtime/components/page/PageRenderer.vue

@@ -34,7 +34,7 @@ const pageRendererStyles = tv({
     title: "",
     surroundSkeleton: "grid grid-cols-1 gap-md sm:grid-cols-2",
     skeleton: "h-48 w-full rounded-xl",
-    metadata: "flex flex-col gap-xs text-xs text-dimmed p-xl"
+    metadata: "flex flex-col gap-xs text-xs text-dimmed p-lg"
   }
 });
 const {

package/dist/runtime/components/swatches/ColorPalette.vue

@@ -1,25 +1,26 @@
 <script setup>
 import { computed } from "vue";
+import chroma from "chroma-js";
 import ColorSwatch from "./ColorSwatch.vue";
 import { tv } from "../../internal/tv";
-import { useRC } from "../../composables";
+import { useRC, useHeaderStack } from "../../composables";
 const { css = "", rc: rcProp } = defineProps({
   css: { type: String, required: false },
   rc: { type: Object, required: false }
 });
 const { rc } = useRC("ColorPalette", rcProp);
+const { totalHeight } = useHeaderStack();
+const stickyTop = computed(() => `${totalHeight.value + 32}px`);
 const paletteStyles = tv({
   slots: {
-    root: "flex flex-col gap-12",
-    section: "flex flex-col gap-6",
-    title: "",
+    root: "w-full",
     grid: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
   }
 });
-const { root, section: sectionStyle, title: titleStyle, grid } = paletteStyles();
-const sections = computed(() => {
+const { root, grid } = paletteStyles();
+const tabItems = computed(() => {
   if (!css) return [];
-  const result = [];
+  const tabs = [];
   const lines = css.split("\n");
   const stack = [];
   function getFormat(value) {
@@ -44,13 +45,26 @@ const sections = computed(() => {
     if (colorMatch && !line.trim().startsWith("/*")) {
       const fullVarName = colorMatch[1] ?? "";
       const value = colorMatch[2]?.trim() ?? "";
-      const title = stack.length > 0 ? stack.join(" \u203A ") : "Other";
-      let section = result.find((s) => s.title === title);
-      if (!section) {
-        section = { title, swatches: [] };
-        result.push(section);
+      const activeStack = stack[0] === "Colors" ? stack.slice(1) : stack;
+      const topLevelLabel = activeStack[0] || "Other";
+      const subLevelLabel = activeStack.length > 1 ? activeStack.slice(1).join(" \u203A ") : topLevelLabel;
+      let tab = tabs.find((t) => t.label === topLevelLabel);
+      if (!tab) {
+        tab = {
+          label: topLevelLabel,
+          subsections: []
+        };
+        tabs.push(tab);
       }
-      section.swatches.push({
+      let subSection = tab.subsections.find((s) => s.label === subLevelLabel);
+      if (!subSection) {
+        subSection = {
+          label: subLevelLabel,
+          swatches: []
+        };
+        tab.subsections.push(subSection);
+      }
+      subSection.swatches.push({
         name: getName(fullVarName),
         value,
         format: getFormat(value)
@@ -60,14 +74,48 @@ const sections = computed(() => {
       stack.pop();
     }
   });
-  return result;
+  return tabs;
 });
+function parseOklch(str) {
+  const match = str.match(/oklch\(([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*[\d.]+%?)?\)/);
+  if (match) {
+    let l = parseFloat(match[1] ?? "0");
+    if (match[1]?.endsWith("%")) l /= 100;
+    const c = parseFloat(match[2] ?? "0");
+    const h = parseFloat(match[3] ?? "0");
+    return [l, c, h];
+  }
+  return null;
+}
 function getSwatchProps(swatch) {
   const p = { name: swatch.name };
-  if (swatch.format !== "unknown") {
-    p[swatch.format] = swatch.value;
-  } else {
-    p.oklch = swatch.value;
+  try {
+    let color;
+    if (swatch.format === "oklch") {
+      const oklchValues = parseOklch(swatch.value);
+      if (oklchValues) {
+        color = chroma.oklch(...oklchValues);
+      } else {
+        color = chroma(swatch.value);
+      }
+    } else {
+      color = chroma(swatch.value);
+    }
+    p.hex = color.hex();
+    p.rgb = color.css();
+    p.hsl = color.css("hsl");
+    const [l, c, h] = color.oklch();
+    p.oklch = `oklch(${Math.round(l * 1e3) / 10}% ${Math.round(c * 1e3) / 1e3} ${Math.round(h * 100) / 100})`;
+    const [cy, m, y, k] = color.cmyk();
+    p.cmyk = `cmyk(${Math.round(cy * 100)}%, ${Math.round(m * 100)}%, ${Math.round(y * 100)}%, ${Math.round(k * 100)}%)`;
+    p.textColor = color.luminance() > 0.45 ? "#000000" : "#FFFFFF";
+  } catch (e) {
+    if (swatch.format !== "unknown") {
+      p[swatch.format] = swatch.value;
+    } else {
+      p.oklch = swatch.value;
+    }
+    p.textColor = "#FFFFFF";
   }
   return p;
 }
@@ -75,22 +123,43 @@ function getSwatchProps(swatch) {
 
 <template>
   <div :class="root({ class: rc.root })">
-    <section
-      v-for="section in sections"
-      :key="section.title"
-      :class="sectionStyle({ class: rc.section })"
+    <UTabs
+      :items="tabItems"
+      orientation="vertical"
+      variant="link"
+      :style="{ '--palette-sticky-top': stickyTop }"
+      :ui="{
+  root: 'flex flex-col md:flex-row gap-12 items-start overflow-visible',
+  list: 'md:w-64 shrink-0 md:sticky md:top-[var(--palette-sticky-top)] self-start z-10 overflow-visible',
+  content: 'flex-1 min-w-0'
+}"
     >
-      <h2 :class="titleStyle({ class: ['text-3xl font-bold text-highlighted', rc.title] })">
-        {{ section.title }}
-      </h2>
-      <div :class="grid({ class: rc.grid })">
-        <ColorSwatch
-          v-for="swatch in section.swatches"
-          :key="swatch.name"
-          v-bind="getSwatchProps(swatch)"
-          :class="rc.swatch"
-        />
-      </div>
-    </section>
+      <template #content="{ item }">
+        <h2 class="text-3xl font-bold text-highlighted mb-8">
+          {{ item.label }}
+        </h2>
+        <UAccordion
+          :items="item.subsections"
+          type="multiple"
+          class="w-full"
+          :ui="{
+  item: 'border-b border-default last:border-b-0',
+  trigger: 'text-xl font-bold py-4',
+  body: 'py-6 px-4'
+}"
+        >
+          <template #body="{ item: subSection }">
+            <div :class="grid({ class: rc.grid })">
+              <ColorSwatch
+                v-for="swatch in subSection.swatches"
+                :key="swatch.name"
+                v-bind="getSwatchProps(swatch)"
+                :class="rc.swatch"
+              />
+            </div>
+          </template>
+        </UAccordion>
+      </template>
+    </UTabs>
   </div>
 </template>

package/dist/runtime/components/swatches/ColorSwatch.d.vue.ts

@@ -5,6 +5,7 @@ export interface ColorSwatchProps {
     hsl?: string;
     oklch?: string;
     cmyk?: string;
+    textColor?: string;
     rc?: {
         card?: string;
         title?: string;

package/dist/runtime/components/swatches/ColorSwatch.vue

@@ -4,13 +4,14 @@ import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { tv } from "../../internal/tv";
 import { useRC } from "../../composables";
-const { name, hex, rgb, hsl, oklch, cmyk, rc: rcProp } = defineProps({
+const { name, hex, rgb, hsl, oklch, cmyk, textColor, rc: rcProp } = defineProps({
   name: { type: String, required: false },
   hex: { type: String, required: false },
   rgb: { type: String, required: false },
   hsl: { type: String, required: false },
   oklch: { type: String, required: false },
   cmyk: { type: String, required: false },
+  textColor: { type: String, required: false },
   rc: { type: Object, required: false }
 });
 const emit = defineEmits([]);
@@ -74,8 +75,8 @@ const color = computed(() => {
     </template>
     <div :class="content({ class: rc.content })">
       <div :class="preview({ class: rc.preview })" :style="{ backgroundColor: color }">
-        <div :class="details({ class: rc.details })">
-          <span v-if="name" class="text-sm">{{ formatColor(name) }}</span>
+        <div :class="details({ class: rc.details })" :style="{ color: textColor || 'white' }">
+          <span v-if="name" class="text-sm font-bold uppercase tracking-wider mb-2 border-b border-current pb-1">{{ name }}</span>
           <span v-if="hex">HEX {{ formatColor(hex) }}</span>
           <span v-if="rgb">{{ formatColor(rgb) }}</span>
           <span v-if="hsl">{{ formatColor(hsl) }}</span>

package/dist/runtime/components/swatches/ColorSwatch.vue.d.ts

@@ -5,6 +5,7 @@ export interface ColorSwatchProps {
     hsl?: string;
     oklch?: string;
     cmyk?: string;
+    textColor?: string;
     rc?: {
         card?: string;
         title?: string;

package/dist/runtime/components/swatches/FontPalette.d.vue.ts

@@ -0,0 +1,18 @@
+export interface FontPaletteProps {
+    /**
+     * Raw CSS content to parse
+     */
+    css?: string;
+    /**
+     * UI custom classes
+     */
+    rc?: {
+        root?: string;
+        section?: string;
+        title?: string;
+        grid?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<FontPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FontPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/swatches/FontPalette.vue

@@ -0,0 +1,289 @@
+<script setup>
+import { computed } from "vue";
+import chroma from "chroma-js";
+import { useRC, useHeaderStack } from "../../composables";
+import { tv } from "../../internal/tv";
+const { css = "", rc: rcProp } = defineProps({
+  css: { type: String, required: false },
+  rc: { type: Object, required: false }
+});
+const { rc } = useRC("FontPalette", rcProp);
+const { totalHeight } = useHeaderStack();
+const stickyTop = computed(() => `${totalHeight.value + 32}px`);
+const paletteStyles = tv({
+  slots: {
+    root: "w-full",
+    section: "flex flex-col gap-12"
+  }
+});
+const { root } = paletteStyles();
+function parseOklch(str) {
+  const match = str.match(/oklch\(([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*[\d.]+%?)?\)/);
+  if (match) {
+    let l = parseFloat(match[1] ?? "0");
+    if (match[1]?.endsWith("%")) l /= 100;
+    const c = parseFloat(match[2] ?? "0");
+    const h = parseFloat(match[3] ?? "0");
+    return [l, c, h];
+  }
+  return null;
+}
+function getColor(value) {
+  try {
+    if (value.startsWith("oklch")) {
+      const oklchValues = parseOklch(value);
+      if (oklchValues) {
+        return chroma.oklch(...oklchValues);
+      }
+    } else if (value.startsWith("#") || value.startsWith("rgb") || value.startsWith("hsl")) {
+      return chroma(value);
+    }
+  } catch (e) {
+  }
+  return null;
+}
+function resolveVariable(varName, map, fallbackMap) {
+  let value = map.get(varName);
+  if (!value && fallbackMap) {
+    value = fallbackMap.get(varName);
+  }
+  if (!value) return varName;
+  const varMatch = value.match(/^var\(([\w-]+)\)$/);
+  if (varMatch) {
+    return resolveVariable(varMatch[1], map, fallbackMap);
+  }
+  return value;
+}
+const parsedData = computed(() => {
+  if (!css) return { fonts: [], colors: [] };
+  const fonts = [];
+  const rootVars = /* @__PURE__ */ new Map();
+  const darkVars = /* @__PURE__ */ new Map();
+  const lines = css.split("\n");
+  let currentBlock = "root";
+  lines.forEach((line) => {
+    if (line.includes(".dark {")) {
+      currentBlock = "dark";
+      return;
+    }
+    if (line.includes("}") && currentBlock === "dark") {
+      currentBlock = "root";
+      return;
+    }
+    const varMatch = line.match(/^\s*(--[\w-]+):\s*(.*?);/);
+    if (varMatch && !line.trim().startsWith("/*")) {
+      const key = varMatch[1] ?? "";
+      const value = varMatch[2]?.trim() ?? "";
+      if (currentBlock === "root") {
+        rootVars.set(key, value);
+      } else {
+        darkVars.set(key, value);
+      }
+    }
+    const fontMatch = line.match(/^\s*--font-([\w-]+):\s*(.*?);/);
+    if (fontMatch && !line.trim().startsWith("/*")) {
+      fonts.push({
+        name: fontMatch[1] ?? "",
+        family: fontMatch[2]?.trim() ?? ""
+      });
+    }
+  });
+  const colors = [];
+  const keys = /* @__PURE__ */ new Set([...rootVars.keys(), ...darkVars.keys()]);
+  keys.forEach((key) => {
+    if (key.startsWith("--text-") || key.startsWith("--ui-text-")) {
+      const name = key.replace(/^--(?:ui-)?text-/, "");
+      const resolvedLight = resolveVariable(key, rootVars);
+      const colorCheck = getColor(resolvedLight);
+      if (colorCheck) {
+        const resolvedDark = resolveVariable(key, darkVars, rootVars);
+        const lightBg = "bg-white";
+        const darkBg = "bg-black";
+        colors.push({
+          name,
+          fullVarName: key,
+          lightValue: resolvedLight,
+          // stored for debugging/info if needed
+          lightBg,
+          darkValue: resolvedDark,
+          darkBg
+        });
+      }
+    }
+  });
+  return { fonts, colors };
+});
+const sampleText = "The quick brown fox jumps over the lazy dog";
+const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const alphabetLower = "abcdefghijklmnopqrstuvwxyz";
+const numbers = "0123456789";
+const symbols = `!@#$%^&*()_+-=[]{};':",./<>?`;
+const headingLevels = [
+  { tag: "h1", label: "Heading 1" },
+  { tag: "h2", label: "Heading 2" },
+  { tag: "h3", label: "Heading 3" },
+  { tag: "h4", label: "Heading 4" },
+  { tag: "h5", label: "Heading 5" },
+  { tag: "h6", label: "Heading 6" }
+];
+const tabItems = computed(() => {
+  return parsedData.value.fonts.map((f) => ({
+    label: f.name.charAt(0).toUpperCase() + f.name.slice(1),
+    font: f,
+    slot: "content"
+  }));
+});
+function getFontStyles(family) {
+  return { fontFamily: family };
+}
+</script>
+
+<template>
+  <div :class="root({ class: rc.root })">
+    <UTabs
+      :items="tabItems"
+      orientation="vertical"
+      variant="link"
+      :style="{ '--palette-sticky-top': stickyTop }"
+      :ui="{
+  root: 'flex flex-col md:flex-row gap-12 items-start overflow-visible',
+  list: 'md:w-64 shrink-0 md:sticky md:top-[var(--palette-sticky-top)] self-start z-10 overflow-visible',
+  content: 'flex-1 min-w-0'
+}"
+    >
+      <template #content="{ item }">
+        <div class="flex flex-col gap-8">
+          <header>
+            <h2 class="text-3xl font-bold text-highlighted mb-2">
+              {{ item.label }}
+            </h2>
+            <code class="text-sm text-muted">{{ item.font.family }}</code>
+          </header>
+
+          <UAccordion
+            multiple
+            :items="[
+  { label: 'Specimen', slot: 'specimen' },
+  { label: 'Hierarchy', slot: 'hierarchy' },
+  { label: 'Color', slot: 'colors' }
+]"
+            :ui="{
+  item: 'border-b border-default last:border-b-0',
+  trigger: 'text-xl font-bold py-4',
+  body: 'py-6 px-4'
+}"
+          >
+            <template #specimen>
+              <div
+                class="flex flex-col gap-8 py-4 text-highlighted"
+                :style="getFontStyles(item.font.family)"
+              >
+                <div class="flex flex-col md:flex-row md:items-baseline gap-4">
+                  <span class="w-32 text-xs text-muted font-mono uppercase shrink-0"
+                    >Uppercase</span
+                  >
+                  <div class="text-4xl break-all line-height-none tracking-tight">
+                    {{ alphabet }}
+                  </div>
+                </div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-4">
+                  <span class="w-32 text-xs text-muted font-mono uppercase shrink-0"
+                    >Lowercase</span
+                  >
+                  <div class="text-4xl break-all line-height-none tracking-tight">
+                    {{ alphabetLower }}
+                  </div>
+                </div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-4">
+                  <span class="w-32 text-xs text-muted font-mono uppercase shrink-0">Numbers</span>
+                  <div class="text-4xl">
+                    {{ numbers }}
+                  </div>
+                </div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-4">
+                  <span class="w-32 text-xs text-muted font-mono uppercase shrink-0">Symbols</span>
+                  <div class="text-4xl">
+                    {{ symbols }}
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <template #hierarchy>
+              <div
+                class="flex flex-col gap-8 pb-8"
+                :style="getFontStyles(item.font.family)"
+              >
+                <div
+                  v-for="h in headingLevels"
+                  :key="h.tag"
+                  class="flex flex-col md:flex-row md:items-baseline gap-4"
+                >
+                  <span class="w-12 text-xs text-muted font-mono uppercase shrink-0">{{
+                    h.tag
+                  }}</span>
+                  <component :is="h.tag" class="m-0">{{ h.label }}</component>
+                </div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-4">
+                  <span class="w-12 text-xs text-muted font-mono uppercase shrink-0">p</span>
+                  <p class="m-0 leading-relaxed max-w-2xl">
+                    {{ sampleText }}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                    do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                  </p>
+                </div>
+              </div>
+            </template>
+
+            <template #colors>
+              <div
+                class="flex flex-col gap-8 pb-8"
+                :style="getFontStyles(item.font.family)"
+              >
+                <div
+                  v-for="c in parsedData.colors"
+                  :key="c.name"
+                  class="flex flex-col md:flex-row gap-4"
+                >
+                  <span class="w-32 text-xs text-muted font-mono shrink-0 pt-2">{{
+                    c.fullVarName
+                  }}</span>
+                  <div
+                    class="flex-1 grid grid-cols-2 rounded-lg overflow-hidden h-20"
+                  >
+                    <!-- Light Mode -->
+                    <div
+                      class="flex flex-col items-center justify-center p-2 gap-1"
+                      :class="c.lightBg"
+                    >
+                      <p class="text-2xl font-bold" :style="{ color: c.lightValue }">Aa</p>
+                      <span
+                        class="text-[10px] opacity-50 font-mono hidden md:block"
+                        :style="{ color: c.lightValue }"
+                        >{{ c.lightValue.slice(0, 15) }}...</span
+                      >
+                    </div>
+
+                    <!-- Dark Mode -->
+                    <div
+                      class="flex flex-col items-center justify-center p-2 gap-1"
+                      :class="c.darkBg"
+                    >
+                      <p class="text-2xl font-bold" :style="{ color: c.darkValue }">Aa</p>
+                      <span
+                        class="text-[10px] opacity-50 font-mono hidden md:block"
+                        :style="{ color: c.darkValue }"
+                        >{{ c.darkValue.slice(0, 15) }}...</span
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </UAccordion>
+        </div>
+      </template>
+    </UTabs>
+  </div>
+</template>

package/dist/runtime/components/swatches/FontPalette.vue.d.ts

@@ -0,0 +1,18 @@
+export interface FontPaletteProps {
+    /**
+     * Raw CSS content to parse
+     */
+    css?: string;
+    /**
+     * UI custom classes
+     */
+    rc?: {
+        root?: string;
+        section?: string;
+        title?: string;
+        grid?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<FontPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FontPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.85",
+  "version": "2.1.87",
   "description": "A component library by Rimelight Entertainment.",
   "keywords": [
     "nuxt",
@@ -89,6 +89,7 @@
     "@nuxt/ui": "^4.2.1",
     "@nuxtjs/i18n": "^10.2.1",
     "@tauri-apps/plugin-http": "^2.5.7",
+    "@types/chroma-js": "^3.1.2",
     "@types/node": "^25.2.0",
     "@vueuse/core": "^14.2.0",
     "@vueuse/nuxt": "^14.2.0",