@flow-os/style 0.0.67-dev.1772065615 → 0.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-os/style",
-  "version": "0.0.67-dev.1772065615",
+  "version": "0.0.68",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",
   "publishConfig": {

package/src/features/elements/apply.ts

@@ -4,6 +4,7 @@
  */
 
 import { resolveS } from '../s';
+import { parseBaseShorthand } from '../styleFlow/baseShorthand';
 import type { SValue } from '../../types';
 import type { StyleFlowTheme } from '../styleFlow';
 
@@ -12,6 +13,12 @@ export interface StyleProps {
   styleFlow?: StyleFlowTheme | string;
 }
 
+function applyStyle(obj: Record<string, string>, el: HTMLElement): void {
+  for (const [k, v] of Object.entries(obj)) {
+    (el.style as unknown as Record<string, string>)[k] = v;
+  }
+}
+
 export function applyStyleProps(el: HTMLElement, props: StyleProps): void {
   const { s, styleFlow } = props;
 
@@ -21,18 +28,22 @@ export function applyStyleProps(el: HTMLElement, props: StyleProps): void {
       const existing = el.className ? `${el.className} ` : '';
       el.className = `${existing}${resolved.className}`;
     }
-    if (resolved.style) {
-      for (const [k, v] of Object.entries(resolved.style)) {
-        (el.style as unknown as Record<string, string>)[k] = v;
-      }
-    }
+    if (resolved.style) applyStyle(resolved.style, el);
   }
 
   if (styleFlow != null) {
     if (typeof styleFlow === 'string') {
       el.setAttribute('data-style-flow', styleFlow);
     } else if (typeof styleFlow === 'object') {
-      el.setAttribute('data-style-flow', JSON.stringify(styleFlow));
+      const base = styleFlow.base;
+      if (typeof base === 'string') {
+        applyStyle(parseBaseShorthand(base), el);
+      }
+      const rest = { ...styleFlow };
+      delete rest.base;
+      if (Object.keys(rest).length > 0) {
+        el.setAttribute('data-style-flow', JSON.stringify(rest));
+      }
     }
   }
 }

package/src/features/s/index.ts

@@ -1,23 +1,75 @@
 /**
  * `s` - shorthand for applying styles to elements.
- * Accepts: string (class names) or object (inline CSS).
+ * Accepts:
+ * - string: class names + inline breakpoints mob:(...) tab:(...) des:(...)
+ * - object: inline CSS or { base, mob, tab, des } for responsive classes
  */
 
-import type { SResult } from './types';
+import type { SResult, SValue } from './types';
 
 export type { SResult, SValue } from './types';
 
+const BP_RE = /(mob|tab|des):\(([^)]*)\)/g;
+const BP_MAP: Record<string, string> = { mob: 'max-sm', tab: 'md', des: 'lg' };
+const BP_KEYS = new Set(['base', 'mob', 'tab', 'des']);
+
 function cssProp(js: string): string {
   return js.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
 
-export function resolveS(s: string | Record<string, string | number | undefined>): SResult {
+function parseBreakpointString(str: string): string {
+  const classes: string[] = [];
+  let base = str;
+
+  let m: RegExpExecArray | null;
+  BP_RE.lastIndex = 0;
+  while ((m = BP_RE.exec(str)) !== null) {
+    const [, bp, content] = m;
+    const prefix = BP_MAP[bp];
+    const tokens = content.trim().split(/\s+/).filter(Boolean);
+    for (const t of tokens) classes.push(`${prefix}:${t}`);
+  }
+
+  base = base.replace(BP_RE, '').replace(/\s+/g, ' ').trim();
+  if (base) classes.unshift(...base.split(/\s+/).filter(Boolean));
+  return classes.join(' ');
+}
+
+export function resolveS(s: SValue): SResult {
   if (typeof s === 'string') {
-    return { className: s.trim() || undefined };
+    const className = parseBreakpointString(s);
+    return { className: className || undefined };
   }
   if (s && typeof s === 'object') {
+    const obj = s as Record<string, string | number | undefined>;
+    const hasBp = BP_KEYS.some((k) => k in obj && obj[k] != null);
+
+    if (hasBp) {
+      const parts: string[] = [];
+      for (const bp of ['base', 'mob', 'tab', 'des']) {
+        const v = obj[bp];
+        if (v == null || v === '') continue;
+        const str = String(v).trim();
+        if (bp === 'base') parts.push(str);
+        else {
+          const prefix = BP_MAP[bp];
+          for (const t of str.split(/\s+/).filter(Boolean)) parts.push(`${prefix}:${t}`);
+        }
+      }
+      const className = parts.join(' ');
+      const style: Record<string, string> = {};
+      for (const [k, v] of Object.entries(obj)) {
+        if (BP_KEYS.has(k) || v == null || v === '') continue;
+        style[cssProp(k)] = String(v);
+      }
+      return {
+        ...(className ? { className } : {}),
+        ...(Object.keys(style).length ? { style } : {}),
+      };
+    }
+
     const style: Record<string, string> = {};
-    for (const [k, v] of Object.entries(s)) {
+    for (const [k, v] of Object.entries(obj)) {
       if (v != null && v !== '') style[cssProp(k)] = String(v);
     }
     return Object.keys(style).length ? { style } : {};

package/src/features/styleFlow/baseShorthand.ts

@@ -0,0 +1,88 @@
+/**
+ * Parses shorthand CSS in base: '...' for styleFlow.
+ * Format: prop value [value...] separated by ;
+ * Examples: bg red; p 4; flex; c #fff
+ */
+
+const SHORTHAND: Record<string, string> = {
+  bg: 'background',
+  background: 'background',
+  bgc: 'background-color',
+  c: 'color',
+  p: 'padding',
+  pt: 'padding-top',
+  pr: 'padding-right',
+  pb: 'padding-bottom',
+  pl: 'padding-left',
+  m: 'margin',
+  mt: 'margin-top',
+  mr: 'margin-right',
+  mb: 'margin-bottom',
+  ml: 'margin-left',
+  w: 'width',
+  h: 'height',
+  minw: 'min-width',
+  minh: 'min-height',
+  maxw: 'max-width',
+  maxh: 'max-height',
+  fw: 'font-weight',
+  fs: 'font-size',
+  lh: 'line-height',
+  gap: 'gap',
+  g: 'gap',
+  r: 'border-radius',
+  radius: 'border-radius',
+  b: 'border',
+  bt: 'border-top',
+  br: 'border-right',
+  bb: 'border-bottom',
+  bl: 'border-left',
+  o: 'opacity',
+  z: 'z-index',
+};
+
+const DISPLAY_TOKENS: Record<string, string> = {
+  flex: 'flex',
+  block: 'block',
+  inline: 'inline',
+  'inline-block': 'inline-block',
+  grid: 'grid',
+  none: 'none',
+  hidden: 'none',
+};
+
+function toValue(v: string): string {
+  const n = parseFloat(v);
+  if (!Number.isNaN(n) && /^\d+(\.\d+)?$/.test(v.trim())) return `${n}px`;
+  return v;
+}
+
+export function parseBaseShorthand(str: string): Record<string, string> {
+  const style: Record<string, string> = {};
+  const parts = str.split(/[;\n]+/).map((s) => s.trim()).filter(Boolean);
+
+  for (const part of parts) {
+    const tokens = part.split(/\s+/).filter(Boolean);
+    if (tokens.length === 0) continue;
+
+    const first = tokens[0].toLowerCase();
+    if (DISPLAY_TOKENS[first]) {
+      style.display = DISPLAY_TOKENS[first];
+      continue;
+    }
+
+    const prop = SHORTHAND[first] ?? first.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const values = tokens.slice(1);
+
+    if (values.length === 0) continue;
+    if (values.length === 1) style[prop] = toValue(values[0]);
+    else if (values.length === 2) {
+      style[prop] = `${toValue(values[0])} ${toValue(values[1])}`;
+    } else if (values.length === 4) {
+      style[prop] = values.map(toValue).join(' ');
+    } else {
+      style[prop] = values.map(toValue).join(' ');
+    }
+  }
+  return style;
+}

package/src/jsx.d.ts

@@ -1,9 +1,15 @@
 declare global {
   namespace JSX {
     interface IntrinsicAttributes {
-      /** Shorthand: class names (string) or inline styles (object) */
+      /**
+       * Shorthand styles:
+       * - string: "flex flex-col mob:(bg-blue) tab:(p-4) des:(w-full)"
+       * - object: { display: 'flex' } or { base: 'flex', mob: 'bg-blue', tab: 'p-4' }
+       */
       s?: string | Record<string, string | number | undefined>;
-      /** Design system / theme token reference */
+      /**
+       * Design system. base: 'bg red; p 4; flex' = shorthand CSS (inline styles).
+       */
       styleFlow?: Record<string, unknown> | string;
     }
   }

package/src/types/index.ts

@@ -5,5 +5,7 @@ export type SValue = string | Record<string, string | number | undefined>;
 export type StyleFlowToken = string | number;
 
 export interface StyleFlowTheme {
-  [key: string]: StyleFlowToken | StyleFlowTheme;
+  /** Shorthand CSS: "bg red; p 4; flex" → inline styles */
+  base?: string;
+  [key: string]: StyleFlowToken | StyleFlowTheme | undefined;
 }