flet-box 0.0.0-stage → 1.0.2

package/src/utils/syntaxHighlight.js

@@ -0,0 +1,339 @@
+// utils/syntaxHighlight.js
+
+// ========== FLETBOX COLORS ==========
+const fletboxColors = {
+  primary: "#6366f1",
+  secondary: "#8b5cf6",
+  success: "#10b981",
+  warning: "#f59e0b",
+  danger: "#ef4444",
+  info: "#3b82f6",
+  background: "#ffffff",
+  surface: "#f8fafc",
+  text: "#0f172a",
+  textSecondary: "#64748b",
+  border: "#e2e8f0",
+};
+
+// ========== FLETBOX KEYWORDS ==========
+const fletboxKeywords = [
+  "Container",
+  "Row",
+  "Column",
+  "Stack",
+  "ListView",
+  "GridView",
+  "Text",
+  "Button",
+  "Icon",
+  "Image",
+  "Avatar",
+  "Card",
+  "ListTile",
+  "Input",
+  "Checkbox",
+  "Radio",
+  "Switch",
+  "Slider",
+  "Dropdown",
+  "ProgressBar",
+  "Rating",
+  "Chip",
+  "Badge",
+  "Divider",
+  "Accordion",
+  "Modal",
+  "BottomSheet",
+  "AlertDialog",
+  "SnackBar",
+  "Scaffold",
+  "AppBar",
+  "Drawer",
+  "BottomNavigation",
+  "Tabs",
+  "DraggBox",
+  "DroppBox",
+  "AnimatedBox",
+  "AnimatedText",
+  "colors",
+  "runApp",
+  "goTo",
+  "useState",
+  "httpGet",
+  "httpPost",
+];
+
+// ========== JAVASCRIPT KEYWORDS ==========
+const jsKeywords = [
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "new",
+  "this",
+  "typeof",
+  "instanceof",
+  "delete",
+  "in",
+  "of",
+  "class",
+  "extends",
+  "super",
+  "import",
+  "export",
+  "default",
+  "from",
+  "as",
+  "async",
+  "await",
+  "true",
+  "false",
+  "null",
+  "undefined",
+];
+
+// ========== TOKEN TYPES ==========
+const TokenType = {
+  KEYWORD: "keyword",
+  STRING: "string",
+  NUMBER: "number",
+  COMMENT: "comment",
+  PROPERTY: "property",
+  FUNCTION: "function",
+  BRACKET: "bracket",
+  PUNCTUATION: "punctuation",
+  FLETBOX_COLOR: "fletbox-color",
+  FLETBOX_WIDGET: "fletbox-widget",
+};
+
+// ========== COLORS PER TOKEN ==========
+export const highlightColors = {
+  [TokenType.KEYWORD]: "#c678dd", // purple
+  [TokenType.STRING]: "#98c379", // green
+  [TokenType.NUMBER]: "#d19a66", // orange
+  [TokenType.COMMENT]: "#5c6370", // gray
+  [TokenType.PROPERTY]: "#e06c75", // red
+  [TokenType.FUNCTION]: "#61afef", // blue
+  [TokenType.BRACKET]: "#abb2bf", // light gray
+  [TokenType.PUNCTUATION]: "#abb2bf", // light gray
+  [TokenType.FLETBOX_COLOR]: "#56b6c2", // cyan
+  [TokenType.FLETBOX_WIDGET]: "#e5c07b", // yellow
+};
+
+// ========== DETECT FLETBOX COLORS ==========
+/**
+ * Returns `true` when the given word represents a FletBox color token.
+ * Matches palette keys, `colors.<name>` expressions, hex literals, and `rgb`/`rgba` values.
+ * @param {string} word - Token text to test.
+ * @returns {boolean}
+ * @private
+ */
+const isFletboxColor = (word) => {
+  return (
+    fletboxColors.hasOwnProperty(word) ||
+    word.match(/^colors\.\w+$/) ||
+    word.match(/^#[0-9A-Fa-f]{3,6}$/) ||
+    word.match(/^rgba?\(/)
+  );
+};
+
+// ========== DETECT FLETBOX WIDGETS ==========
+/**
+ * Returns `true` when the given word is a known FletBox widget or utility identifier.
+ * @param {string} word - Token text to test.
+ * @returns {boolean}
+ * @private
+ */
+const isFletboxWidget = (word) => {
+  return fletboxKeywords.includes(word);
+};
+
+// ========== MAIN TOKENIZER ==========
+/**
+ * Tokenizes a JavaScript/FletBox source string into an array of typed tokens.
+ *
+ * Token types: `keyword`, `string`, `number`, `comment`, `property`,
+ * `function`, `bracket`, `punctuation`, `fletbox-color`, `fletbox-widget`,
+ * `whitespace`, `text`.
+ *
+ * @param {string} code - Source code to tokenize.
+ * @returns {Array<{type: string, value: string}>} Ordered token array.
+ * @example
+ * tokenize('const x = 42;')
+ * // [
+ * //   { type: 'keyword', value: 'const' },
+ * //   { type: 'whitespace', value: ' ' },
+ * //   { type: 'property', value: 'x' },
+ * //   ...
+ * // ]
+ */
+export const tokenize = (code) => {
+  const tokens = [];
+  let i = 0;
+  const len = code.length;
+
+  while (i < len) {
+    const char = code[i];
+
+    // ========== STRINGS ==========
+    if (char === '"' || char === "'" || char === "`") {
+      const quote = char;
+      let start = i;
+      i++;
+      while (i < len && code[i] !== quote) {
+        if (code[i] === "\\" && i + 1 < len) i++;
+        i++;
+      }
+      i++;
+      tokens.push({
+        type: TokenType.STRING,
+        value: code.substring(start, i),
+      });
+      continue;
+    }
+
+    // ========== COMMENTS ==========
+    if (char === "/" && code[i + 1] === "/") {
+      let start = i;
+      while (i < len && code[i] !== "\n") i++;
+      tokens.push({
+        type: TokenType.COMMENT,
+        value: code.substring(start, i),
+      });
+      continue;
+    }
+
+    if (char === "/" && code[i + 1] === "*") {
+      let start = i;
+      i += 2;
+      while (i < len && !(code[i - 1] === "*" && code[i] === "/")) i++;
+      i++;
+      tokens.push({
+        type: TokenType.COMMENT,
+        value: code.substring(start, i),
+      });
+      continue;
+    }
+
+    // ========== NUMBERS ==========
+    if (/[0-9]/.test(char)) {
+      let start = i;
+      while (i < len && /[0-9.]/.test(code[i])) i++;
+      tokens.push({
+        type: TokenType.NUMBER,
+        value: code.substring(start, i),
+      });
+      continue;
+    }
+
+    // ========== WORDS (identifiers) ==========
+    if (/[a-zA-Z_$]/.test(char)) {
+      let start = i;
+      while (i < len && /[a-zA-Z0-9_$]/.test(code[i])) i++;
+      const word = code.substring(start, i);
+
+      // Detect word type
+      if (isFletboxWidget(word)) {
+        tokens.push({ type: TokenType.FLETBOX_WIDGET, value: word });
+      } else if (isFletboxColor(word)) {
+        tokens.push({ type: TokenType.FLETBOX_COLOR, value: word });
+      } else if (jsKeywords.includes(word)) {
+        tokens.push({ type: TokenType.KEYWORD, value: word });
+      } else if (word.match(/^[a-z][a-zA-Z0-9]*$/)) {
+        // Possible property or function
+        tokens.push({ type: TokenType.PROPERTY, value: word });
+      } else {
+        tokens.push({ type: TokenType.PROPERTY, value: word });
+      }
+      continue;
+    }
+
+    // ========== BRACKETS AND PUNCTUATION ==========
+    if ("{}[]()".includes(char)) {
+      tokens.push({ type: TokenType.BRACKET, value: char });
+      i++;
+      continue;
+    }
+
+    if (",;:.".includes(char)) {
+      tokens.push({ type: TokenType.PUNCTUATION, value: char });
+      i++;
+      continue;
+    }
+
+    // ========== WHITESPACE (preserved for formatting) ==========
+    if (/\s/.test(char)) {
+      let start = i;
+      while (i < len && /\s/.test(code[i])) i++;
+      tokens.push({ type: "whitespace", value: code.substring(start, i) });
+      continue;
+    }
+
+    // ========== ANY OTHER CHARACTER ==========
+    tokens.push({ type: "text", value: char });
+    i++;
+  }
+
+  return tokens;
+};
+
+// ========== GENERATE HTML WITH COLORS ==========
+/**
+ * Tokenizes `code` and wraps each token in a `<span>` with an inline `color`
+ * style matching {@link highlightColors}. Whitespace and unrecognized tokens
+ * are emitted without a wrapper.
+ * @param {string} code - Source code to highlight.
+ * @returns {string} HTML string safe for insertion into `innerHTML`.
+ */
+export const generateHighlightedHtml = (code) => {
+  const tokens = tokenize(code);
+  let html = "";
+
+  for (const token of tokens) {
+    if (token.type === "whitespace") {
+      html += token.value;
+    } else {
+      const color = highlightColors[token.type];
+      if (color) {
+        html += `<span style="color: ${color};">${escapeHtml(token.value)}</span>`;
+      } else {
+        html += escapeHtml(token.value);
+      }
+    }
+  }
+
+  return html;
+};
+
+// ========== ESCAPE HTML ==========
+/**
+ * Escapes HTML special characters so that token values can be safely inserted
+ * into a `<span>` element's content.
+ * @param {string} text - Raw token text.
+ * @returns {string} HTML-safe string.
+ * @private
+ */
+const escapeHtml = (text) => {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+};
+
+export default { tokenize, generateHighlightedHtml, highlightColors };

package/src/utils/themes.js

@@ -0,0 +1,347 @@
+// src/components/flet-box/utils/themes.js
+
+// ========== DEFAULT COLORS (static, safe) ==========
+const DEFAULT_COLORS = {
+  primary: "#6366f1",
+  secondary: "#8b5cf6",
+  success: "#10b981",
+  warning: "#f59e0b",
+  danger: "#ef4444",
+  info: "#3b82f6",
+  background: "#ffffff",
+  surface: "#f8fafc",
+  card: "#ffffff",
+  text: "#0f172a",
+  textSecondary: "#64748b",
+  textDisabled: "#94a3b8",
+  border: "#e2e8f0",
+  gray50: "#f8fafc",
+  gray100: "#f1f5f9",
+  gray200: "#e2e8f0",
+  gray300: "#cbd5e1",
+  gray400: "#94a3b8",
+  gray500: "#64748b",
+  gray600: "#475569",
+  gray700: "#334155",
+  gray800: "#1e293b",
+  gray900: "#0f172a",
+  overlay: "rgba(0, 0, 0, 0.4)",
+  shadow: "rgba(0, 0, 0, 0.1)",
+  divider: "#eeeeee",
+  error: "#ff3b30",
+  errorBg: "#ffe5e5",
+  successBg: "#e5f5e5",
+  warningBg: "#fff5e5",
+  infoBg: "#e5f5ff",
+};
+
+// ========== EXPORT colors (always defined) ==========
+export let colors = { ...DEFAULT_COLORS };
+
+// ========== PALETTES ==========
+export const palettes = {
+  light: {
+    primary: "#00A5FF",
+    secondary: "#8b5cf6",
+    success: "#10b981",
+    warning: "#f59e0b",
+    danger: "#ef4444",
+    info: "#3b82f6",
+    background: "#ffffff",
+    surface: "#f8fafc",
+    card: "#ffffff",
+    text: "#0f172a",
+    textSecondary: "#64748b",
+    textDisabled: "#94a3b8",
+    border: "#e2e8f0",
+    gray50: "#f8fafc",
+    gray100: "#f1f5f9",
+    gray200: "#e2e8f0",
+    gray300: "#cbd5e1",
+    gray400: "#94a3b8",
+    gray500: "#64748b",
+    gray600: "#475569",
+    gray700: "#334155",
+    gray800: "#1e293b",
+    gray900: "#0f172a",
+    overlay: "rgba(0, 0, 0, 0.4)",
+    shadow: "rgba(0, 0, 0, 0.1)",
+  },
+  dark: {
+    primary: "#00AFBC",
+    secondary: "#a78bfa",
+    success: "#10b981",
+    warning: "#fbbf24",
+    danger: "#f87171",
+    info: "#60a5fa",
+    background: "#0f172a",
+    surface: "#1e293b",
+    card: "#1e293b",
+    text: "#f1f5f9",
+    textSecondary: "#94a3b8",
+    textDisabled: "#64748b",
+    border: "#334155",
+    gray50: "#1e293b",
+    gray100: "#334155",
+    gray200: "#475569",
+    gray300: "#64748b",
+    gray400: "#94a3b8",
+    gray500: "#cbd5e1",
+    gray600: "#e2e8f0",
+    gray700: "#f1f5f9",
+    gray800: "#f8fafc",
+    gray900: "#ffffff",
+    overlay: "rgba(0, 0, 0, 0.6)",
+    shadow: "rgba(0, 0, 0, 0.3)",
+  },
+};
+
+// ========== SUBSCRIBERS ==========
+const themeSubscribers = [];
+
+/**
+ * Subscribes a callback to theme change events.
+ * @param {function(Object): void} callback - Function called with the new colors object on every theme change.
+ * @returns {function(): void} Unsubscribe function — call it to remove the listener.
+ * @example
+ * const unsub = subscribeTheme((colors) => console.log(colors.primary));
+ * unsub(); // stop listening
+ */
+export const subscribeTheme = (callback) => {
+  if (typeof callback === "function") {
+    themeSubscribers.push(callback);
+  }
+  return () => {
+    const index = themeSubscribers.indexOf(callback);
+    if (index > -1) themeSubscribers.splice(index, 1);
+  };
+};
+
+/**
+ * Notifies all registered theme subscribers of a color change.
+ * Errors thrown by individual subscribers are caught and warned.
+ * @private
+ */
+const notifyThemeChange = () => {
+  themeSubscribers.forEach((cb) => {
+    try {
+      cb(colors);
+    } catch (e) {
+      console.warn("Theme subscriber error:", e);
+    }
+  });
+};
+
+// ========== THEME FUNCTIONS ==========
+/**
+ * Applies a named theme palette to the global `colors` object, updates all
+ * CSS custom properties on `:root`, persists the choice to `localStorage`,
+ * and notifies all subscribers.
+ * @param {string} themeName - Name of the palette to apply (e.g. `"light"` or `"dark"`).
+ * @returns {Object} The updated `colors` object after the theme is applied.
+ */
+export const setTheme = (themeName) => {
+  const palette = palettes[themeName];
+  if (palette) {
+    Object.keys(palette).forEach((key) => {
+      if (colors.hasOwnProperty(key)) {
+        colors[key] = palette[key];
+      }
+    });
+  }
+
+  // Update CSS variables
+  try {
+    const root = document.documentElement;
+    Object.keys(colors).forEach((key) => {
+      root.style.setProperty(`--color-${key}`, colors[key]);
+    });
+  } catch (e) {
+    // Silently fail in non-browser environments
+  }
+
+  // Save preference
+  try {
+    localStorage.setItem("fletbox-theme", themeName);
+  } catch (e) {
+    // Silently fail
+  }
+
+  notifyThemeChange();
+  return colors;
+};
+
+/**
+ * Returns the currently active theme name.
+ * Reads from `localStorage` first; falls back to the OS
+ * `prefers-color-scheme` media query; defaults to `"light"`.
+ * @returns {"light"|"dark"} The active theme name.
+ */
+export const getTheme = () => {
+  try {
+    const savedTheme = localStorage.getItem("fletbox-theme");
+    if (savedTheme && (savedTheme === "light" || savedTheme === "dark")) {
+      return savedTheme;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  } catch (e) {
+    return "light";
+  }
+};
+
+/**
+ * Switches between `"light"` and `"dark"` themes.
+ * @returns {"light"|"dark"} The new theme name after toggling.
+ */
+export const toggleTheme = () => {
+  const currentTheme = getTheme();
+  const newTheme = currentTheme === "light" ? "dark" : "light";
+  setTheme(newTheme);
+  return newTheme;
+};
+
+/**
+ * Applies the OS-level color scheme preference only when no theme has been
+ * explicitly saved to `localStorage`.
+ * @returns {"light"|"dark"} The theme that was applied or already saved.
+ */
+export const applySystemTheme = () => {
+  try {
+    const savedTheme = localStorage.getItem("fletbox-theme");
+    if (!savedTheme) {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      setTheme(systemTheme);
+      return systemTheme;
+    }
+    return savedTheme;
+  } catch (e) {
+    return "light";
+  }
+};
+
+/**
+ * Registers a listener on the OS `prefers-color-scheme` media query and
+ * automatically calls {@link setTheme} whenever the system preference changes,
+ * but only when no theme has been explicitly saved to `localStorage`.
+ * @returns {function(): void} Cleanup function that removes the media-query listener.
+ */
+export const watchSystemTheme = () => {
+  try {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      const savedTheme = localStorage.getItem("fletbox-theme");
+      if (!savedTheme) {
+        const theme = e.matches ? "dark" : "light";
+        setTheme(theme);
+      }
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  } catch (e) {
+    return () => {};
+  }
+};
+
+/**
+ * Resolves a color by name from the active palette and optionally applies an
+ * alpha channel to hex values.
+ * @param {string} colorName - Key in the `colors` map (e.g. `"primary"`, `"border"`) or a raw CSS color string.
+ * @param {number} [opacity=1] - Alpha value between 0 and 1. Ignored for non-hex values.
+ * @returns {string} CSS color string (hex or `rgba(...)`).
+ * @example
+ * getColor("primary")       // "#6366f1"
+ * getColor("primary", 0.5)  // "rgba(99, 102, 241, 0.5)"
+ */
+export const getColor = (colorName, opacity = 1) => {
+  const color = colors[colorName] || colorName;
+  if (opacity === 1) return color;
+
+  if (typeof color === "string" && color.startsWith("#")) {
+    const r = parseInt(color.slice(1, 3), 16);
+    const g = parseInt(color.slice(3, 5), 16);
+    const b = parseInt(color.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return color;
+};
+
+// ========== COMPONENTS ==========
+/**
+ * Thin wrapper component that applies a theme on render.
+ * Pass `theme` to force a specific palette; omit it to leave the active theme unchanged.
+ * @param {Object} props
+ * @param {*} props.children - Child content to render.
+ * @param {string|null} [props.theme=null] - Theme name to apply (`"light"` or `"dark"`).
+ * @returns {*} The `children` value, unchanged.
+ */
+export const ThemeProvider = ({ children, theme = null }) => {
+  if (theme) setTheme(theme);
+  return children;
+};
+
+/**
+ * Returns a hook-like object containing the full theme API.
+ * Useful for accessing the active colors and theme utilities from any component.
+ * @returns {{
+ *   colors: Object,
+ *   setTheme: function,
+ *   getTheme: function,
+ *   toggleTheme: function,
+ *   getColor: function,
+ *   applySystemTheme: function
+ * }}
+ */
+export const useTheme = () => {
+  return {
+    colors,
+    setTheme,
+    getTheme,
+    toggleTheme,
+    getColor,
+    applySystemTheme,
+  };
+};
+
+// ========== INITIALIZATION (safe) ==========
+const initTheme = () => {
+  try {
+    const savedTheme = localStorage.getItem("fletbox-theme");
+    if (savedTheme && (savedTheme === "light" || savedTheme === "dark")) {
+      setTheme(savedTheme);
+    } else {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      setTheme(systemTheme);
+    }
+    watchSystemTheme();
+  } catch (e) {
+    // If it fails, use default values
+    console.warn("Theme initialization failed, using defaults");
+  }
+};
+
+// Initialize only in browser environment
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  initTheme();
+}
+
+export default {
+  colors,
+  palettes,
+  setTheme,
+  getTheme,
+  toggleTheme,
+  getColor,
+  subscribeTheme,
+  applySystemTheme,
+  watchSystemTheme,
+  ThemeProvider,
+  useTheme,
+};