rimelight-components 2.1.85 → 2.1.86

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.85",
+  "version": "2.1.86",
   "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.86";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

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,46 @@ 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)}%)`;
+  } catch (e) {
+    if (swatch.format !== "unknown") {
+      p[swatch.format] = swatch.value;
+    } else {
+      p.oklch = swatch.value;
+    }
   }
   return p;
 }
@@ -75,22 +121,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/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,186 @@
+<script setup>
+import { computed } from "vue";
+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();
+const parsedData = computed(() => {
+  if (!css) return { fonts: [], colors: [] };
+  const fonts = [];
+  const colors = [];
+  const lines = css.split("\n");
+  lines.forEach((line) => {
+    const fontMatch = line.match(/^\s*--font-([\w-]+):\s*(.*?);/);
+    if (fontMatch && !line.trim().startsWith("/*")) {
+      fonts.push({
+        name: fontMatch[1] ?? "",
+        family: fontMatch[2]?.trim() ?? ""
+      });
+    }
+    const textColorMatch = line.match(/^\s*--text-([\w-]+):\s*(.*?);/);
+    if (textColorMatch && !line.trim().startsWith("/*")) {
+      const name = textColorMatch[1] ?? "";
+      const isSize = /^(xs|sm|md|lg|xl|\d+xl|hero|base|desc)$/.test(name);
+      if (!isSize) {
+        colors.push({
+          name,
+          value: textColorMatch[2]?.trim() ?? ""
+        });
+      }
+    }
+  });
+  const uniqueColors = [];
+  colors.forEach((c) => {
+    if (!uniqueColors.find((uc) => uc.name === c.name)) {
+      uniqueColors.push(c);
+    }
+  });
+  return { fonts, colors: uniqueColors };
+});
+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 Test', 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-4 py-4 text-highlighted"
+                :style="getFontStyles(item.font.family)"
+              >
+                <div class="text-4xl break-all line-height-none tracking-tight">
+                  {{ alphabet }}
+                </div>
+                <div class="text-4xl break-all line-height-none tracking-tight">
+                  {{ alphabetLower }}
+                </div>
+                <div class="text-4xl">
+                  {{ numbers }}
+                </div>
+                <div class="text-4xl">
+                  {{ symbols }}
+                </div>
+              </div>
+            </template>
+
+            <template #hierarchy>
+              <div class="flex flex-col gap-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="grid grid-cols-1 sm:grid-cols-2 gap-x-12 gap-y-8"
+                :style="getFontStyles(item.font.family)"
+              >
+                <div
+                  v-for="c in parsedData.colors"
+                  :key="c.name"
+                  class="flex flex-col gap-2 p-4 rounded border border-transparent hover:border-default transition-colors"
+                >
+                  <div class="flex items-center justify-between text-xs font-mono text-muted mb-2">
+                    <span>--text-{{ c.name }}</span>
+                    <span class="opacity-50 uppercase">{{ c.value }}</span>
+                  </div>
+                  <div
+                    class="p-4 rounded border border-default/10"
+                    :class="c.name === 'inverted' ? 'bg-highlighted' : 'bg-default/5'"
+                  >
+                    <p class="text-xl font-bold" :style="{ color: `var(--text-${c.name})` }">
+                      {{ sampleText }}
+                    </p>
+                  </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.86",
   "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",