@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.733

package/dist/chunk-FCGLSWKR.cjs

@@ -0,0 +1,417 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+
+
+var _chunkPX7FY655cjs = require('./chunk-PX7FY655.cjs');
+
+
+
+
+var _chunkFICJS5OAcjs = require('./chunk-FICJS5OA.cjs');
+
+// src/utils/color-analysis.ts
+var DESIGN_PALETTE = [
+  { name: "yellow", hex: "#FFC008", rgb: [255, 192, 8] },
+  { name: "black", hex: "#161616", rgb: [22, 22, 22] },
+  { name: "gray", hex: "#888888", rgb: [136, 136, 136] }
+];
+function hexToRgb(hex) {
+  const normalized = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalized);
+  return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
+}
+function getLuminance(rgb) {
+  const [r, g, b] = rgb.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastRatio(color1, color2) {
+  const lum1 = getLuminance(color1);
+  const lum2 = getLuminance(color2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function pickReadableTextColor(bgHex) {
+  const bg = hexToRgb(bgHex);
+  const darkContrast = getContrastRatio(bg, [26, 26, 26]);
+  const lightContrast = getContrastRatio(bg, [250, 250, 250]);
+  return darkContrast >= lightContrast ? "dark" : "light";
+}
+function extractDominantColor(canvas) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return [128, 128, 128];
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  const sampleSize = Math.max(1, Math.floor(data.length / (4 * 1e3)));
+  const colorCounts = {};
+  for (let i = 0; i < data.length; i += 4 * sampleSize) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const alpha = data[i + 3];
+    if (alpha < 128) continue;
+    const bucketR = Math.round(r / 32) * 32;
+    const bucketG = Math.round(g / 32) * 32;
+    const bucketB = Math.round(b / 32) * 32;
+    const key = `${bucketR},${bucketG},${bucketB}`;
+    colorCounts[key] = (colorCounts[key] || 0) + 1;
+  }
+  let maxCount = 0;
+  let dominantColor = [128, 128, 128];
+  for (const [colorKey, count] of Object.entries(colorCounts)) {
+    if (count > maxCount) {
+      maxCount = count;
+      const [r, g, b] = colorKey.split(",").map(Number);
+      dominantColor = [r, g, b];
+    }
+  }
+  return dominantColor;
+}
+function getBestContrastColor(imageColor) {
+  let bestColor = DESIGN_PALETTE[0];
+  let bestContrast = 0;
+  for (const color of DESIGN_PALETTE) {
+    const contrast = getContrastRatio(imageColor, color.rgb);
+    if (contrast > bestContrast) {
+      bestContrast = contrast;
+      bestColor = color;
+    }
+  }
+  return bestContrast >= 3 ? bestColor : DESIGN_PALETTE.find((c) => c.name === "black") || bestColor;
+}
+function analyzeImageColor(imageSrc) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Could not get canvas context"));
+          return;
+        }
+        const maxSize = 100;
+        const scale = Math.min(maxSize / img.width, maxSize / img.height);
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const dominantColor = extractDominantColor(canvas);
+        const bestContrastColor = getBestContrastColor(dominantColor);
+        resolve(bestContrastColor);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = imageSrc;
+  });
+}
+async function extractImageEdgeColorAsync(imageUrl) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined") {
+      resolve("#000000");
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          resolve("#000000");
+          return;
+        }
+        const maxSize = 50;
+        const scale = Math.min(maxSize / img.naturalWidth, maxSize / img.naturalHeight);
+        const w = Math.round(img.naturalWidth * scale);
+        const h = Math.round(img.naturalHeight * scale);
+        canvas.width = w;
+        canvas.height = h;
+        ctx.drawImage(img, 0, 0, w, h);
+        const data = ctx.getImageData(0, 0, w, h).data;
+        const edgeW = Math.max(2, Math.round(w * 0.15));
+        const edgeH = Math.max(2, Math.round(h * 0.15));
+        const bucketSize = 32;
+        const buckets = /* @__PURE__ */ new Map();
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
+            if (!(x < edgeW || x >= w - edgeW || y < edgeH || y >= h - edgeH)) continue;
+            const i = (y * w + x) * 4;
+            if (data[i + 3] < 128) continue;
+            const br = Math.floor(data[i] / bucketSize) * bucketSize;
+            const bg = Math.floor(data[i + 1] / bucketSize) * bucketSize;
+            const bb = Math.floor(data[i + 2] / bucketSize) * bucketSize;
+            const key = `${br},${bg},${bb}`;
+            const existing = buckets.get(key);
+            if (existing) {
+              existing.r += data[i];
+              existing.g += data[i + 1];
+              existing.b += data[i + 2];
+              existing.count++;
+            } else {
+              buckets.set(key, { r: data[i], g: data[i + 1], b: data[i + 2], count: 1 });
+            }
+          }
+        }
+        let best = { r: 0, g: 0, b: 0, count: 0 };
+        for (const b2 of buckets.values()) {
+          if (b2.count > best.count) best = b2;
+        }
+        if (best.count === 0) {
+          resolve("#000000");
+          return;
+        }
+        const r = Math.round(best.r / best.count), g = Math.round(best.g / best.count), b = Math.round(best.b / best.count);
+        resolve(
+          `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
+        );
+      } catch (e) {
+        resolve("#000000");
+      }
+    };
+    img.onerror = () => resolve("#000000");
+    img.src = imageUrl;
+  });
+}
+
+// src/utils/ods-color-tokens-stub.ts
+var colorTokens = {
+  primary: "#FFC008",
+  secondary: "#161616",
+  background: "#FAFAFA",
+  surface: "#FFFFFF",
+  text: {
+    primary: "#161616",
+    secondary: "#666666",
+    inverse: "#FFFFFF"
+  },
+  border: "#E5E5E5"
+};
+
+// src/utils/ods-color-utils.ts
+var TOKEN_MAP = colorTokens;
+function lookupToken(tokenKey) {
+  const value = TOKEN_MAP[tokenKey];
+  return typeof value === "string" ? value : void 0;
+}
+function getODSToken(category, color, variant = "base") {
+  const tokenKey = `${category}-${color}-${variant}`;
+  return lookupToken(tokenKey);
+}
+function getCurrentPlatform() {
+  if (typeof window === "undefined") {
+    return process.env.NEXT_PUBLIC_APP_TYPE || "openmsp";
+  }
+  const domPlatform = document.documentElement.getAttribute("data-app-type");
+  if (domPlatform) {
+    return domPlatform;
+  }
+  return process.env.NEXT_PUBLIC_APP_TYPE || "openmsp";
+}
+function switchPlatformTheme(platform) {
+  if (typeof window === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute("data-app-type", platform);
+  window.dispatchEvent(
+    new CustomEvent("platformThemeChanged", {
+      detail: { platform }
+    })
+  );
+}
+function getSemanticColor(semanticName, platform) {
+  if (typeof window === "undefined") return void 0;
+  const currentPlatform = platform || getCurrentPlatform();
+  const originalPlatform = getCurrentPlatform();
+  if (currentPlatform !== originalPlatform) {
+    switchPlatformTheme(currentPlatform);
+  }
+  const testElement = document.createElement("div");
+  document.body.appendChild(testElement);
+  const computedStyle = getComputedStyle(testElement);
+  const colorValue = computedStyle.getPropertyValue(`--color-${semanticName}`);
+  document.body.removeChild(testElement);
+  if (currentPlatform !== originalPlatform) {
+    switchPlatformTheme(originalPlatform);
+  }
+  return colorValue.trim() || void 0;
+}
+function getPlatformConfig(platform) {
+  const currentPlatform = platform || getCurrentPlatform();
+  const isDarkTheme = _chunkFICJS5OAcjs.PLATFORM_THEME === "dark";
+  return {
+    platform: currentPlatform,
+    accentColor: _chunkFICJS5OAcjs.getPlatformAccentColor.call(void 0, currentPlatform),
+    isDarkTheme,
+    isLightTheme: !isDarkTheme,
+    brandName: _chunkFICJS5OAcjs.getPlatformDisplayName.call(void 0, currentPlatform)
+  };
+}
+function usePlatformColors(platform) {
+  const currentPlatform = platform || getCurrentPlatform();
+  const config = getPlatformConfig(currentPlatform);
+  return {
+    platform: currentPlatform,
+    accentColor: config.accentColor,
+    isDarkTheme: config.isDarkTheme,
+    isLightTheme: config.isLightTheme,
+    brandName: config.brandName,
+    getToken: (category, color, variant) => getODSToken(category, color, variant),
+    switchTheme: (newPlatform) => switchPlatformTheme(newPlatform),
+    getSemanticColor: (semanticName) => getSemanticColor(semanticName, currentPlatform)
+  };
+}
+function getReadableTextColor(hex) {
+  return pickReadableTextColor(hex) === "dark" ? "#212121" : "#fafafa";
+}
+var HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+function hexToRgb2(hex) {
+  if (!HEX_PATTERN.test(hex)) return null;
+  const n = Number.parseInt(hex.slice(1), 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function rgbToHex(r, g, b) {
+  const to = (n) => _chunkPX7FY655cjs.clamp.call(void 0, Math.round(n), 0, 255).toString(16).padStart(2, "0");
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+var HOVER_DARKEN_STEP = 10;
+var ACTIVE_DARKEN_STEP = 20;
+function darkenByStep(hex, step) {
+  const rgb = hexToRgb2(hex);
+  if (!rgb) return hex;
+  return rgbToHex(rgb.r - step, rgb.g - step, rgb.b - step);
+}
+function deriveHoverColor(hex) {
+  return darkenByStep(hex, HOVER_DARKEN_STEP);
+}
+function deriveActiveColor(hex) {
+  return darkenByStep(hex, ACTIVE_DARKEN_STEP);
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);
+  else if (max === gn) h = (bn - rn) / d + 2;
+  else h = (rn - gn) / d + 4;
+  h *= 60;
+  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hslToRgb(h, s, l) {
+  const sn = _chunkPX7FY655cjs.clamp.call(void 0, s, 0, 100) / 100;
+  const ln = _chunkPX7FY655cjs.clamp.call(void 0, l, 0, 100) / 100;
+  const hn = (h % 360 + 360) % 360;
+  if (sn === 0) {
+    const v = Math.round(ln * 255);
+    return { r: v, g: v, b: v };
+  }
+  const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
+  const p = 2 * ln - q;
+  const hue2rgb = (t) => {
+    let tn = t;
+    if (tn < 0) tn += 1;
+    if (tn > 1) tn -= 1;
+    if (tn < 1 / 6) return p + (q - p) * 6 * tn;
+    if (tn < 1 / 2) return q;
+    if (tn < 2 / 3) return p + (q - p) * (2 / 3 - tn) * 6;
+    return p;
+  };
+  const hk = hn / 360;
+  return {
+    r: Math.round(hue2rgb(hk + 1 / 3) * 255),
+    g: Math.round(hue2rgb(hk) * 255),
+    b: Math.round(hue2rgb(hk - 1 / 3) * 255)
+  };
+}
+
+// src/components/agent-identity.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var AGENT_GLYPH_COLOR = "var(--color-text-primary)";
+var AGENT_PICTURE_CLASS = "rounded-full object-cover";
+var AgentIdentityContext = _react.createContext.call(void 0, null);
+function Provide({ icons, children }) {
+  const bySlug = _react.useMemo.call(void 0, () => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [slug, icon] of Object.entries(_nullishCoalesce(icons, () => ( {})))) if (icon) map.set(slug, icon);
+    return map;
+  }, [icons]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AgentIdentityContext.Provider, { value: bySlug, children });
+}
+function ProvideFromServer({
+  endpoint,
+  enabled,
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Provide, { icons: _chunkPX7FY655cjs.useAgentIdentities.call(void 0, endpoint, enabled), children });
+}
+function AgentIdentityProvider({
+  icons,
+  endpoint = _chunkPX7FY655cjs.AGENT_IDENTITIES_API_PATH,
+  enabled = true,
+  children
+}) {
+  if (icons) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Provide, { icons, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProvideFromServer, { endpoint, enabled, children });
+}
+function useAgentIdentityIcon(slug) {
+  const identities = _react.useContext.call(void 0, AgentIdentityContext);
+  const unprovided = !identities && Boolean(slug);
+  _react.useEffect.call(void 0, () => {
+    if (!unprovided || process.env.NODE_ENV === "production") return;
+    console.error(
+      `[AgentIdentity] the mark of "${slug}" was asked for with no <AgentIdentityProvider> above it: agents are drawn from their server identities only, so mount the provider once at the root.`
+    );
+  }, [unprovided, slug]);
+  return _optionalChain([identities, 'optionalAccess', _2 => _2.get, 'call', _3 => _3(_nullishCoalesce(slug, () => ( "")))]);
+}
+function useAgentAccents() {
+  const identities = _react.useContext.call(void 0, AgentIdentityContext);
+  return _react.useCallback.call(void 0, 
+    (slug) => {
+      const accent = _optionalChain([identities, 'optionalAccess', _4 => _4.get, 'call', _5 => _5(_nullishCoalesce(slug, () => ( ""))), 'optionalAccess', _6 => _6.accent]);
+      return typeof accent === "string" && HEX_PATTERN.test(accent) ? accent : void 0;
+    },
+    [identities]
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.DESIGN_PALETTE = DESIGN_PALETTE; exports.getContrastRatio = getContrastRatio; exports.pickReadableTextColor = pickReadableTextColor; exports.extractDominantColor = extractDominantColor; exports.getBestContrastColor = getBestContrastColor; exports.analyzeImageColor = analyzeImageColor; exports.extractImageEdgeColorAsync = extractImageEdgeColorAsync; exports.getCurrentPlatform = getCurrentPlatform; exports.switchPlatformTheme = switchPlatformTheme; exports.getSemanticColor = getSemanticColor; exports.getPlatformConfig = getPlatformConfig; exports.usePlatformColors = usePlatformColors; exports.getReadableTextColor = getReadableTextColor; exports.HEX_PATTERN = HEX_PATTERN; exports.hexToRgb = hexToRgb2; exports.rgbToHex = rgbToHex; exports.deriveHoverColor = deriveHoverColor; exports.deriveActiveColor = deriveActiveColor; exports.rgbToHsl = rgbToHsl; exports.hslToRgb = hslToRgb; exports.AGENT_GLYPH_COLOR = AGENT_GLYPH_COLOR; exports.AGENT_PICTURE_CLASS = AGENT_PICTURE_CLASS; exports.AgentIdentityProvider = AgentIdentityProvider; exports.useAgentIdentityIcon = useAgentIdentityIcon; exports.useAgentAccents = useAgentAccents;

package/dist/{chunk-MANNIJ42.cjs → chunk-FICJS5OA.cjs}

@@ -634,6 +634,12 @@ var ICON_ALIASES = {
   rocket: ROCKET,
   video: { set: "VideoRecorderIcon" },
   headphones: { set: "HeadphoneIcon" },
+  // The two LLM brands offered by `ICON_OPTIONS`. Their brand-colored glyphs
+  // are the only picker entries that hardcode a fill (#000 / #D97757), so they
+  // ignored the chip accent and sat black and orange in a cyan grid; the grey
+  // variants fill with `currentColor` like every other brand logo here.
+  "openai-logo": { set: "OpenaiLogoGreyIcon" },
+  "anthropic-logo": { set: "AnthropicLogoGreyIcon" },
   // Figma-canonical aliases (node 7363:205938) — kept for Storybook
   // fixtures and any older feed entries still using the long names.
   "clickup-logo": CLICKUP_GREY,