rimelight-components 2.1.82 → 2.1.84

package/dist/module.json

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

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

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, useTemplateRef, provide } from "vue";
 import {} from "../../types";
-import { usePageEditor, usePageRegistry, useRC } from "../../composables";
+import { usePageEditor, usePageRegistry, useRC, useHeaderStack } from "../../composables";
 import { getLocalizedContent } from "../../utils";
 import { useI18n } from "vue-i18n";
 import { tv } from "../../internal/tv";
@@ -44,7 +44,7 @@ const pageEditorStyles = tv({
   slots: {
     header: "h-12 w-full bg-muted",
     headerGroup: "flex items-center gap-xs",
-    splitContainer: "flex w-full overflow-hidden",
+    splitContainer: "flex w-full overflow-hidden min-h-0",
     editorColumn: "h-full overflow-y-auto",
     container: "flex flex-col py-16",
     grid: "grid grid-cols-1 lg:grid-cols-24 gap-xl items-start",
@@ -99,6 +99,7 @@ provide("page-resolver", resolvePage);
 const previousPage = computed(() => surround?.previous);
 const nextPage = computed(() => surround?.next);
 const hasSurround = computed(() => !!(surround?.previous || surround?.next));
+const { totalHeight } = useHeaderStack();
 const containerRef = useTemplateRef("split-container");
 const editorWidth = ref(50);
 const isResizing = ref(false);
@@ -285,7 +286,11 @@ const handleTreeNavigate = (slug) => {
     </UHeader>
   </RCHeaderLayer>
 
-  <div ref="split-container" :class="splitContainer({ class: rc.splitContainer })">
+  <div 
+    ref="split-container" 
+    :class="splitContainer({ class: rc.splitContainer })"
+    :style="{ height: `calc(100vh - ${totalHeight}px)` }"
+  >
     <div
       :class="editorColumn({ class: rc.editorColumn })"
       :style="{ width: showPreview ? `${editorWidth}%` : '100%' }"

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

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

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

@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from "vue";
+import ColorSwatch from "./ColorSwatch.vue";
+import { tv } from "../../internal/tv";
+import { useRC } from "../../composables";
+const { css = "", rc: rcProp } = defineProps({
+  css: { type: String, required: false },
+  rc: { type: Object, required: false }
+});
+const { rc } = useRC("ColorPalette", rcProp);
+const paletteStyles = tv({
+  slots: {
+    root: "flex flex-col gap-12",
+    section: "flex flex-col gap-6",
+    title: "",
+    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(() => {
+  if (!css) return [];
+  const result = [];
+  const lines = css.split("\n");
+  const stack = [];
+  function getFormat(value) {
+    if (value.startsWith("#")) return "hex";
+    if (value.startsWith("oklch")) return "oklch";
+    if (value.startsWith("rgb")) return "rgb";
+    if (value.startsWith("hsl")) return "hsl";
+    if (value.startsWith("cmyk")) return "cmyk";
+    return "unknown";
+  }
+  function getName(fullVarName) {
+    const parts = fullVarName.split("-");
+    return parts[parts.length - 1] ?? "";
+  }
+  lines.forEach((line) => {
+    const regionStartMatch = line.match(/\/\*\s*region\s+(.*?)\s*\*\//);
+    const regionEndMatch = line.match(/\/\*\s*endregion\s*\*\//);
+    if (regionStartMatch) {
+      stack.push(regionStartMatch[1] ?? "");
+    }
+    const colorMatch = line.match(/^\s*--color-([\w-]+):\s*(.*?);/);
+    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);
+      }
+      section.swatches.push({
+        name: getName(fullVarName),
+        value,
+        format: getFormat(value)
+      });
+    }
+    if (regionEndMatch) {
+      stack.pop();
+    }
+  });
+  return result;
+});
+function getSwatchProps(swatch) {
+  const p = { name: swatch.name };
+  if (swatch.format !== "unknown") {
+    p[swatch.format] = swatch.value;
+  } else {
+    p.oklch = swatch.value;
+  }
+  return p;
+}
+</script>
+
+<template>
+  <div :class="root({ class: rc.root })">
+    <section
+      v-for="section in sections"
+      :key="section.title"
+      :class="sectionStyle({ class: rc.section })"
+    >
+      <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>
+  </div>
+</template>

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

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

package/dist/runtime/components/swatches/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ColorSwatch } from './ColorSwatch.vue.js';
+export { default as ColorPalette } from './ColorPalette.vue.js';
 export { default as FontSwatch } from './FontSwatch.vue.js';
 export { default as ImageSwatch } from './ImageSwatch.vue.js';

package/dist/runtime/components/swatches/index.js

@@ -1,3 +1,4 @@
 export { default as ColorSwatch } from "./ColorSwatch.vue";
+export { default as ColorPalette } from "./ColorPalette.vue";
 export { default as FontSwatch } from "./FontSwatch.vue";
 export { default as ImageSwatch } from "./ImageSwatch.vue";

package/dist/runtime/components/swatches/index.mjs

@@ -1,3 +1,4 @@
 export { default as ColorSwatch } from "./ColorSwatch.vue";
+export { default as ColorPalette } from "./ColorPalette.vue";
 export { default as FontSwatch } from "./FontSwatch.vue";
 export { default as ImageSwatch } from "./ImageSwatch.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.82",
+  "version": "2.1.84",
   "description": "A component library by Rimelight Entertainment.",
   "keywords": [
     "nuxt",
@@ -70,9 +70,10 @@
   },
   "dependencies": {
     "@nuxt/kit": "^4.3.0",
+    "chroma-js": "^3.2.0",
     "defu": "^6.1.4",
-    "tailwind-variants": "^3.2.2",
     "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
     "uuid": "^13.0.0"
   },
   "devDependencies": {