@flow.os/style 0.0.1-dev.1771665310

package/breakpoints.ts

@@ -0,0 +1,20 @@
+/** Chiavi viewport: ordine da piccolo a grande (merge sovrascrive). */
+export const VIEWPORT_KEYS = ['mob', 'tab', 'des'] as const;
+export type ViewportKey = (typeof VIEWPORT_KEYS)[number];
+
+/** Chiavi pseudo-stato (hover, active, focus). */
+export const PSEUDO_KEYS = ['hover', 'active', 'focus', 'focusVisible'] as const;
+export type PseudoKey = (typeof PSEUDO_KEYS)[number];
+
+/** Larghezze min (px) per viewport. mob < 640, tab 640–1023, des 1024+. */
+export const VIEWPORT_WIDTHS: Record<ViewportKey, number> = {
+  mob: 0,
+  tab: 640,
+  des: 1024,
+};
+
+export function getViewportKeyFromWidth(w: number): ViewportKey {
+  if (w >= 1024) return 'des';
+  if (w >= 640) return 'tab';
+  return 'mob';
+}

package/extension/.vscodeignore

@@ -0,0 +1,5 @@
+.vscode/**
+src/**
+tsconfig.json
+.gitignore
+**/*.map

package/extension/README.md

@@ -0,0 +1,7 @@
+# Flow Style — Color Picker
+
+- **Pallino** (cerchio) prima di ogni colore `#hex` o `rgb(...)`.
+- **Quadratino** dell’editor sul colore: **click** → picker nativo inline.
+- Alternativa: **Ctrl+Shift+C** con cursore sul colore → input hex/rgb.
+
+Installazione: Install from VSIX → `flow-style-colors-0.0.1.vsix`.

package/extension/out/extension.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activate = activate;
+exports.deactivate = deactivate;
+const vscode = require("vscode");
+function parseHexColor(text) {
+    const hex = text.replace(/^#/, '');
+    if (hex.length === 3) {
+        const r = parseInt(hex[0] + hex[0], 16) / 255;
+        const g = parseInt(hex[1] + hex[1], 16) / 255;
+        const b = parseInt(hex[2] + hex[2], 16) / 255;
+        return { r, g, b, a: 1 };
+    }
+    if (hex.length === 6 || hex.length === 8) {
+        const r = parseInt(hex.slice(0, 2), 16) / 255;
+        const g = parseInt(hex.slice(2, 4), 16) / 255;
+        const b = parseInt(hex.slice(4, 6), 16) / 255;
+        const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+        return { r, g, b, a };
+    }
+    return null;
+}
+function parseRgb(text) {
+    const m = text.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
+    if (!m)
+        return null;
+    return {
+        r: Math.min(255, parseInt(m[1], 10)) / 255,
+        g: Math.min(255, parseInt(m[2], 10)) / 255,
+        b: Math.min(255, parseInt(m[3], 10)) / 255,
+        a: m[4] != null ? parseFloat(m[4]) : 1,
+    };
+}
+function findColorRanges(document) {
+    const text = document.getText();
+    const results = [];
+    const hexPattern = /#[0-9a-fA-F]{3,8}(?![0-9a-fA-F])/g;
+    let m;
+    while ((m = hexPattern.exec(text)) !== null) {
+        const full = m[0];
+        const color = parseHexColor(full);
+        if (color) {
+            results.push({
+                range: new vscode.Range(document.positionAt(m.index), document.positionAt(m.index + full.length)),
+                color: new vscode.Color(color.r, color.g, color.b, color.a),
+            });
+        }
+    }
+    const rgbPattern = /rgba?\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+(?:\s*,\s*[\d.]+)?\s*\)/g;
+    while ((m = rgbPattern.exec(text)) !== null) {
+        const color = parseRgb(m[0]);
+        if (color) {
+            results.push({
+                range: new vscode.Range(document.positionAt(m.index), document.positionAt(m.index + m[0].length)),
+                color: new vscode.Color(color.r, color.g, color.b, color.a),
+            });
+        }
+    }
+    return results;
+}
+function provideColorPresentations(color, context) {
+    const { red, green, blue, alpha } = color;
+    const r = Math.round(red * 255);
+    const g = Math.round(green * 255);
+    const b = Math.round(blue * 255);
+    const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    const out = [
+        { label: hex, textEdit: new vscode.TextEdit(context.range, hex) },
+    ];
+    if (alpha < 1) {
+        const hexa = hex + Math.round(alpha * 255).toString(16).padStart(2, '0');
+        out.push({ label: hexa, textEdit: new vscode.TextEdit(context.range, hexa) }, { label: `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`, textEdit: new vscode.TextEdit(context.range, `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`) });
+    }
+    else {
+        out.push({ label: `rgb(${r}, ${g}, ${b})`, textEdit: new vscode.TextEdit(context.range, `rgb(${r}, ${g}, ${b})`) });
+    }
+    return out;
+}
+function activate(context) {
+    // Assicura che il quadratino colore sia visibile (può essere stato disattivato in precedenza)
+    const cfg = vscode.workspace.getConfiguration('editor');
+    if (cfg.get('colorDecorators') === false) {
+        void cfg.update('colorDecorators', true, vscode.ConfigurationTarget.Workspace);
+    }
+    // Quadrato nativo: click sul colore → picker inline
+    const colorProvider = vscode.languages.registerColorProvider([{ language: 'typescript' }, { language: 'typescriptreact' }, { language: 'javascript' }, { language: 'javascriptreact' }], {
+        provideDocumentColors(document) {
+            return findColorRanges(document);
+        },
+        provideColorPresentations(color, ctx) {
+            return provideColorPresentations(color, ctx);
+        },
+    });
+    context.subscriptions.push(colorProvider);
+    // Comando alternativo: cursore sul colore → Ctrl+Shift+C → input hex/rgb
+    const editCmd = vscode.commands.registerCommand('flow-style-colors.editColor', async () => {
+        const editor = vscode.window.activeTextEditor;
+        if (!editor)
+            return;
+        const doc = editor.document;
+        const pos = editor.selection.active;
+        const infos = findColorRanges(doc);
+        const info = infos.find((i) => i.range.contains(pos));
+        if (!info) {
+            void vscode.window.showInformationMessage('Posiziona il cursore su un colore (#hex o rgb(...))');
+            return;
+        }
+        const current = doc.getText(info.range);
+        const newValue = await vscode.window.showInputBox({
+            title: 'Modifica colore',
+            value: current,
+            prompt: 'Hex (#fff) o rgb(r,g,b)',
+            validateInput(v) {
+                const t = v.trim();
+                if (/^#[0-9a-fA-F]{3,8}$/.test(t))
+                    return null;
+                if (/^rgba?\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+(?:\s*,\s*[\d.]+)?\s*\)$/.test(t))
+                    return null;
+                return 'Inserisci #hex o rgb(r,g,b)';
+            },
+        });
+        if (newValue == null)
+            return;
+        const edit = new vscode.WorkspaceEdit();
+        edit.replace(doc.uri, info.range, newValue.trim());
+        await vscode.workspace.applyEdit(edit);
+    });
+    context.subscriptions.push(editCmd);
+}
+function deactivate() { }

package/extension/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "flow-style-colors",
+  "displayName": "Flow Style — Color Picker",
+  "description": "Cerchio + color picker per hex/rgb in TS/JS",
+  "version": "0.0.1",
+  "publisher": "flow-framework",
+  "engines": { "vscode": "^1.85.0" },
+  "categories": ["Other"],
+  "activationEvents": ["onLanguage:typescript", "onLanguage:typescriptreact", "onLanguage:javascript", "onLanguage:javascriptreact"],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [{ "command": "flow-style-colors.editColor", "title": "Flow Style: Modifica colore" }],
+    "keybindings": [{ "command": "flow-style-colors.editColor", "key": "ctrl+shift+c", "when": "editorTextFocus" }]
+  },
+  "scripts": {
+    "vscode:prepublish": "tsc -p .",
+    "compile": "tsc -p .",
+    "watch": "tsc -w -p ."
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.85.0",
+    "typescript": "~5.7.0"
+  }
+}

package/extension/src/extension.ts

@@ -0,0 +1,146 @@
+import * as vscode from 'vscode';
+
+function parseHexColor(text: string): { r: number; g: number; b: number; a: number } | null {
+  const hex = text.replace(/^#/, '');
+  if (hex.length === 3) {
+    const r = parseInt(hex[0] + hex[0], 16) / 255;
+    const g = parseInt(hex[1] + hex[1], 16) / 255;
+    const b = parseInt(hex[2] + hex[2], 16) / 255;
+    return { r, g, b, a: 1 };
+  }
+  if (hex.length === 6 || hex.length === 8) {
+    const r = parseInt(hex.slice(0, 2), 16) / 255;
+    const g = parseInt(hex.slice(2, 4), 16) / 255;
+    const b = parseInt(hex.slice(4, 6), 16) / 255;
+    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+    return { r, g, b, a };
+  }
+  return null;
+}
+
+function parseRgb(text: string): { r: number; g: number; b: number; a: number } | null {
+  const m = text.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
+  if (!m) return null;
+  return {
+    r: Math.min(255, parseInt(m[1], 10)) / 255,
+    g: Math.min(255, parseInt(m[2], 10)) / 255,
+    b: Math.min(255, parseInt(m[3], 10)) / 255,
+    a: m[4] != null ? parseFloat(m[4]) : 1,
+  };
+}
+
+function findColorRanges(document: vscode.TextDocument): vscode.ColorInformation[] {
+  const text = document.getText();
+  const results: vscode.ColorInformation[] = [];
+
+  const hexPattern = /#[0-9a-fA-F]{3,8}(?![0-9a-fA-F])/g;
+  let m: RegExpExecArray | null;
+  while ((m = hexPattern.exec(text)) !== null) {
+    const full = m[0];
+    const color = parseHexColor(full);
+    if (color) {
+      results.push({
+        range: new vscode.Range(
+          document.positionAt(m.index),
+          document.positionAt(m.index + full.length)
+        ),
+        color: new vscode.Color(color.r, color.g, color.b, color.a),
+      });
+    }
+  }
+
+  const rgbPattern = /rgba?\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+(?:\s*,\s*[\d.]+)?\s*\)/g;
+  while ((m = rgbPattern.exec(text)) !== null) {
+    const color = parseRgb(m[0]);
+    if (color) {
+      results.push({
+        range: new vscode.Range(
+          document.positionAt(m.index),
+          document.positionAt(m.index + m[0].length)
+        ),
+        color: new vscode.Color(color.r, color.g, color.b, color.a),
+      });
+    }
+  }
+
+  return results;
+}
+
+function provideColorPresentations(
+  color: vscode.Color,
+  context: { document: vscode.TextDocument; range: vscode.Range }
+): vscode.ColorPresentation[] {
+  const { red, green, blue, alpha } = color;
+  const r = Math.round(red * 255);
+  const g = Math.round(green * 255);
+  const b = Math.round(blue * 255);
+  const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+  const out: vscode.ColorPresentation[] = [
+    { label: hex, textEdit: new vscode.TextEdit(context.range, hex) },
+  ];
+  if (alpha < 1) {
+    const hexa = hex + Math.round(alpha * 255).toString(16).padStart(2, '0');
+    out.push(
+      { label: hexa, textEdit: new vscode.TextEdit(context.range, hexa) },
+      { label: `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`, textEdit: new vscode.TextEdit(context.range, `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`) }
+    );
+  } else {
+    out.push({ label: `rgb(${r}, ${g}, ${b})`, textEdit: new vscode.TextEdit(context.range, `rgb(${r}, ${g}, ${b})`) });
+  }
+  return out;
+}
+
+export function activate(context: vscode.ExtensionContext): void {
+  // Assicura che il quadratino colore sia visibile (può essere stato disattivato in precedenza)
+  const cfg = vscode.workspace.getConfiguration('editor');
+  if (cfg.get('colorDecorators') === false) {
+    void cfg.update('colorDecorators', true, vscode.ConfigurationTarget.Workspace);
+  }
+
+  // Quadrato nativo: click sul colore → picker inline
+  const colorProvider = vscode.languages.registerColorProvider(
+    [{ language: 'typescript' }, { language: 'typescriptreact' }, { language: 'javascript' }, { language: 'javascriptreact' }],
+    {
+      provideDocumentColors(document) {
+        return findColorRanges(document);
+      },
+      provideColorPresentations(color, ctx) {
+        return provideColorPresentations(color, ctx);
+      },
+    }
+  );
+  context.subscriptions.push(colorProvider);
+
+  // Comando alternativo: cursore sul colore → Ctrl+Shift+C → input hex/rgb
+  const editCmd = vscode.commands.registerCommand('flow-style-colors.editColor', async () => {
+    const editor = vscode.window.activeTextEditor;
+    if (!editor) return;
+    const doc = editor.document;
+    const pos = editor.selection.active;
+    const infos = findColorRanges(doc);
+    const info = infos.find((i) => i.range.contains(pos));
+    if (!info) {
+      void vscode.window.showInformationMessage('Posiziona il cursore su un colore (#hex o rgb(...))');
+      return;
+    }
+    const current = doc.getText(info.range);
+    const newValue = await vscode.window.showInputBox({
+      title: 'Modifica colore',
+      value: current,
+      prompt: 'Hex (#fff) o rgb(r,g,b)',
+      validateInput(v) {
+        const t = v.trim();
+        if (/^#[0-9a-fA-F]{3,8}$/.test(t)) return null;
+        if (/^rgba?\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+(?:\s*,\s*[\d.]+)?\s*\)$/.test(t)) return null;
+        return 'Inserisci #hex o rgb(r,g,b)';
+      },
+    });
+    if (newValue == null) return;
+    const edit = new vscode.WorkspaceEdit();
+    edit.replace(doc.uri, info.range, newValue.trim());
+    await vscode.workspace.applyEdit(edit);
+  });
+  context.subscriptions.push(editCmd);
+}
+
+export function deactivate(): void {}

package/extension/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "lib": ["ES2022"],
+    "outDir": "out",
+    "rootDir": "src",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
+}

package/index.ts

@@ -0,0 +1,16 @@
+export { SHORTHAND_MAP, isStyleKey, getStyleProp, toStyleValue } from './shorthand.js';
+export type { StyleShorthandKey } from './shorthand.js';
+export {
+  VIEWPORT_KEYS,
+  PSEUDO_KEYS,
+  VIEWPORT_WIDTHS,
+  getViewportKeyFromWidth,
+} from './breakpoints.js';
+export type { ViewportKey, PseudoKey } from './breakpoints.js';
+export {
+  resolveLayer,
+  mergeResolved,
+  resolvePseudoStyle,
+  styleToCssText,
+} from './resolve.js';
+export type { PlainLayer, ResolvedLayer } from './resolve.js';

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@flow.os/style",
+  "version": "0.0.1-dev.1771665310",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    }
+  }
+}

package/resolve.ts

@@ -0,0 +1,84 @@
+import { isStyleKey, getStyleProp, toStyleValue } from './shorthand.js';
+import { VIEWPORT_KEYS, PSEUDO_KEYS } from './breakpoints.js';
+
+const DEFAULT_TOKENS = new Set(['primary', 'muted', 'primary-foreground']);
+
+/** Layer già "plain" (getter chiamati dal runtime). base + flat style/class. */
+export type PlainLayer = {
+  base?: string;
+  [key: string]: string | number | boolean | PlainLayer | undefined;
+};
+
+export type ResolvedLayer = { class: string; style: Record<string, string> };
+
+const RESERVED = new Set([
+  ...VIEWPORT_KEYS,
+  ...PSEUDO_KEYS,
+]);
+
+function isReserved(key: string): boolean {
+  return RESERVED.has(key as 'mob');
+}
+
+/** Risolve un layer plain in class + style. Non considera mob/tab/des/hover/active. */
+export function resolveLayer(plain: PlainLayer, tokens?: Set<string>): ResolvedLayer {
+  const t = tokens ?? DEFAULT_TOKENS;
+  const classes: string[] = [];
+  const style: Record<string, string> = {};
+
+  if (plain.base) classes.push(plain.base.trim());
+
+  for (const [k, v] of Object.entries(plain)) {
+    if (k === 'base' || isReserved(k)) continue;
+    if (v === undefined || v === null) continue;
+
+    if (isStyleKey(k)) {
+      const prop = getStyleProp(k);
+      if (prop) {
+        let val = toStyleValue(v, t);
+        if (k === 'scale' && typeof v === 'number') val = `scale(${v})`;
+        style[prop] = val;
+      }
+    } else {
+      if (v === true) classes.push(k);
+      if (typeof v === 'string' && v) classes.push(v);
+    }
+  }
+
+  return {
+    class: classes.filter(Boolean).join(' '),
+    style,
+  };
+}
+
+/** Merge due resolved: second sovrascrive style, class è concatenata. */
+export function mergeResolved(a: ResolvedLayer, b: ResolvedLayer): ResolvedLayer {
+  return {
+    class: [a.class, b.class].filter(Boolean).join(' '),
+    style: { ...a.style, ...b.style },
+  };
+}
+
+/** Solo stile da un layer (per pseudo). Ignora base e classList. */
+export function resolvePseudoStyle(plain: PlainLayer, tokens?: Set<string>): Record<string, string> {
+  const t = tokens ?? DEFAULT_TOKENS;
+  const style: Record<string, string> = {};
+  for (const [k, v] of Object.entries(plain)) {
+    if (k === 'base' || isReserved(k)) continue;
+    if (!isStyleKey(k)) continue;
+    const prop = getStyleProp(k);
+    if (prop && v !== undefined && v !== null) {
+      let val = toStyleValue(v, t);
+      if (k === 'scale' && typeof v === 'number') val = `scale(${v})`;
+      style[prop] = val;
+    }
+  }
+  return style;
+}
+
+/** Da oggetto stile a stringa CSS (per iniettare regola :hover). */
+export function styleToCssText(style: Record<string, string>): string {
+  return Object.entries(style)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join('; ');
+}

package/shorthand.ts

@@ -0,0 +1,62 @@
+/**
+ * Shorthand → CSS property. Solo chiavi "pure" (no suffisso tipo mb-10).
+ * Usato per decidere se una chiave è stile (valore number/string/getter) o classList (bool/getter).
+ */
+export const SHORTHAND_MAP = {
+  text: 'fontSize',
+  mb: 'marginBottom',
+  mt: 'marginTop',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mx: 'marginLeft',
+  my: 'marginTop',
+  m: 'margin',
+  pb: 'paddingBottom',
+  pt: 'paddingTop',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  px: 'paddingLeft',
+  py: 'paddingTop',
+  p: 'padding',
+  w: 'width',
+  h: 'height',
+  minW: 'minWidth',
+  minH: 'minHeight',
+  maxW: 'maxWidth',
+  maxH: 'maxHeight',
+  gap: 'gap',
+  rounded: 'borderRadius',
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom',
+  color: 'color',
+  bg: 'background',
+  scale: 'transform',
+  outline: 'outline',
+  opacity: 'opacity',
+  flex: 'flex',
+  display: 'display',
+} as const satisfies Record<string, string>;
+
+export type StyleShorthandKey = keyof typeof SHORTHAND_MAP;
+
+const SHORTHAND_SET = new Set<string>(Object.keys(SHORTHAND_MAP));
+
+export function isStyleKey(key: string): boolean {
+  return key.startsWith('--') || SHORTHAND_SET.has(key);
+}
+
+export function getStyleProp(key: string): string | undefined {
+  if (key.startsWith('--')) return key;
+  return key in SHORTHAND_MAP ? SHORTHAND_MAP[key as StyleShorthandKey] : undefined;
+}
+
+/** Numero → "Npx", altrimenti stringa. Token "primary" → var(--color-primary) se in tokens. (scale gestito in resolve.) */
+export function toStyleValue(v: unknown, tokens?: Set<string>): string {
+  if (v == null) return '';
+  if (typeof v === 'number') return `${v}px`;
+  const s = String(v);
+  if (tokens && tokens.has(s)) return `var(--color-${s})`;
+  return s;
+}