@symbo.ls/shorthand 2.34.33 → 2.34.35

package/README.md

@@ -0,0 +1,181 @@
+# @symbo.ls/shorthand
+
+Bidirectional shorthand transpiler for [Symbols](https://github.com/symbo-ls/smbls) component properties. Compresses DOMQL component objects using abbreviated property names and compact string encoding — and losslessly expands them back.
+
+## Install
+
+```sh
+npm install @symbo.ls/shorthand
+```
+
+## API
+
+Six functions in three complementary pairs:
+
+| Pair       | Forward     | Inverse  | Description                                                  |
+| ---------- | ----------- | -------- | ------------------------------------------------------------ |
+| **String** | `encode`    | `decode` | Flat object ↔ single-line shorthand string                  |
+| **Object** | `shorten`   | `expand` | Recursive key abbreviation preserving structure              |
+| **Hybrid** | `stringify` | `parse`  | Primitive props → `in` string, structural props stay as keys |
+
+### encode / decode
+
+Converts flat primitive props into a compact single-line string.
+
+```js
+import { encode, decode } from '@symbo.ls/shorthand'
+
+encode({ padding: 'A B', background: 'red', hidden: true })
+// → 'p:A_B bg:red hid'
+
+decode('p:A_B bg:red hid')
+// → { padding: 'A B', background: 'red', hidden: true }
+```
+
+**Syntax rules:**
+
+- `abbr:value` — key-value pair
+- `_` — represents spaces inside values
+- `,` — array separator (`ext:Flex,Box` → `extends: ['Flex', 'Box']`)
+- bare `abbr` — boolean `true`
+- `!abbr` — boolean `false`
+
+Functions, objects, and other non-serializable values are skipped.
+
+### shorten / expand
+
+Recursively abbreviates (or expands) property keys throughout the component tree while preserving the full object structure — child components, selectors, functions, arrays, and everything else stays intact.
+
+```js
+import { shorten, expand } from '@symbo.ls/shorthand'
+
+const component = {
+  extends: 'Flex',
+  padding: 'A B',
+  gap: 'C',
+  flexDirection: 'column',
+  onClick: (e, el) => {},
+  Header: { fontSize: 'B' },
+  ':hover': { background: 'blue' }
+}
+
+shorten(component)
+// {
+//   ext: 'Flex',
+//   p: 'A B',
+//   g: 'C',
+//   fxd: 'column',
+//   '@ck': (e, el) => {},
+//   Header: { fs: 'B' },
+//   ':hover': { bg: 'blue' }
+// }
+
+expand(shorten(component)) // deeply equals original
+```
+
+**Preservation rules:**
+
+- **PascalCase keys** (child components) — key kept as-is, value recursed
+- **Selector keys** (`:hover`, `@dark`, `.isActive`, `> *`) — key kept, value recursed
+- **`state`, `scope`, `attr`, `style`, `data`, `context`, `query`, `class`** — values preserved as-is (no key abbreviation inside)
+- **Functions** — preserved, only the key is shortened
+
+### stringify / parse
+
+Hybrid encoding: flat primitive props go into a compact `in` string, while structural props (functions, nested objects, child components, selectors) remain as shortened object keys.
+
+```js
+import { stringify, parse } from '@symbo.ls/shorthand'
+
+const component = {
+  extends: 'Flex',
+  padding: 'A',
+  background: 'surface',
+  borderRadius: 'B',
+  onClick: (e, el) => {},
+  Header: { fontSize: 'B', color: 'title' }
+}
+
+stringify(component)
+// {
+//   in: 'ext:Flex p:A bg:surface bdr:B',
+//   '@ck': (e, el) => {},
+//   Header: { in: 'fs:B c:title' }
+// }
+
+parse(stringify(component)) // deeply equals original
+```
+
+**What goes into `in`:**
+
+- String props (except `text`, `html`, `content`, `placeholder`, `src`, `href`)
+- Boolean props
+- Primitive arrays (length > 1)
+
+**What stays as object keys:**
+
+- Functions, `null`, `undefined`
+- Nested objects, arrays of objects
+- PascalCase children, selector keys
+- Preserved keys (`state`, `scope`, `style`, etc.)
+- Skip-inline keys (`text`, `html`, `content`, `placeholder`, `src`, `href`)
+- Numbers (to preserve type through round-trip)
+- Strings containing `,` or `_` (to avoid encoding ambiguity)
+
+## Registry
+
+The package ships with 300+ bidirectional abbreviation mappings covering:
+
+- **DOMQL core** — `extends` → `ext`, `childExtends` → `cex`, `state` → `st`, `tag` → `tg`
+- **Symbols shorthand** — `flow` → `fl`, `align` → `aln`, `round` → `rnd`, `boxSize` → `bsz`
+- **CSS properties** — `padding` → `p`, `background` → `bg`, `flexDirection` → `fxd`, `zIndex` → `zi`
+- **HTML attributes** — `placeholder` → `phd`, `disabled` → `dis`, `required` → `req`
+- **ARIA attributes** — `ariaLabel` → `alb`, `ariaHidden` → `ahid`, `role` → `role`
+- **Events** — `onClick` → `@ck`, `onRender` → `@rn`, `onSubmit` → `@sm`, `onKeyDown` → `@kd`
+
+Access the maps directly:
+
+```js
+import { propToAbbr, abbrToProp } from '@symbo.ls/shorthand'
+
+propToAbbr['padding'] // 'p'
+propToAbbr['onClick'] // '@ck'
+abbrToProp['bg'] // 'background'
+abbrToProp['@rn'] // 'onRender'
+```
+
+### Helpers
+
+```js
+import {
+  isComponentKey,
+  isSelectorKey,
+  PRESERVE_VALUE_KEYS,
+  SKIP_INLINE_KEYS
+} from '@symbo.ls/shorthand'
+
+isComponentKey('Header') // true  (PascalCase)
+isComponentKey('padding') // false
+
+isSelectorKey(':hover') // true
+isSelectorKey('@dark') // true
+isSelectorKey('.isActive') // true
+isSelectorKey('> *') // true
+isSelectorKey('padding') // false
+```
+
+## Round-trip guarantee
+
+All three pairs are lossless — the inverse function always reproduces the original:
+
+```js
+decode(encode(obj)) // ≈ obj (flat primitives only)
+expand(shorten(obj)) // ≡ obj (full structure)
+parse(stringify(obj)) // ≡ obj (full structure)
+```
+
+The test suite verifies round-trip correctness against 200+ real-world Symbols components.
+
+## License
+
+ISC

package/dist/cjs/further.js

@@ -0,0 +1,263 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var further_exports = {};
+__export(further_exports, {
+  parseFurther: () => parseFurther,
+  stringifyFurther: () => stringifyFurther
+});
+module.exports = __toCommonJS(further_exports);
+var import_registry = require("./registry.js");
+function escapeValue(val) {
+  const str = String(val);
+  return str.replace(/\\/g, "\\\\").replace(/_/g, "\\_").replace(/,/g, "\\,").replace(/ /g, "_");
+}
+function unescapeValue(val) {
+  let result = "";
+  let i = 0;
+  while (i < val.length) {
+    if (val[i] === "\\" && i + 1 < val.length) {
+      const next = val[i + 1];
+      if (next === "," || next === "_" || next === "\\") {
+        result += next;
+        i += 2;
+        continue;
+      }
+    }
+    if (val[i] === "_") {
+      result += " ";
+    } else {
+      result += val[i];
+    }
+    i++;
+  }
+  return result;
+}
+function splitOnUnescapedCommas(str) {
+  const parts = [];
+  let current = "";
+  let i = 0;
+  while (i < str.length) {
+    if (str[i] === "\\" && i + 1 < str.length) {
+      current += str[i] + str[i + 1];
+      i += 2;
+      continue;
+    }
+    if (str[i] === ",") {
+      parts.push(current);
+      current = "";
+      i++;
+      continue;
+    }
+    current += str[i];
+    i++;
+  }
+  parts.push(current);
+  return parts;
+}
+function canCollapse(val) {
+  if (val === null || val === void 0) return false;
+  if (typeof val !== "object" || Array.isArray(val)) return false;
+  const keys = Object.keys(val);
+  return keys.length === 1 && keys[0] === "in" && typeof val.in === "string";
+}
+function stringifyFurther(obj) {
+  if (!obj || typeof obj !== "object") return obj;
+  if (Array.isArray(obj)) {
+    return obj.map(function(item) {
+      if (item !== null && typeof item === "object")
+        return stringifyFurther(item);
+      return item;
+    });
+  }
+  const result = {};
+  const tokens = [];
+  for (const key in obj) {
+    const val = obj[key];
+    if ((0, import_registry.isComponentKey)(key)) {
+      const child = stringifyFurtherVal(val);
+      result[key] = canCollapse(child) ? child.in : child;
+      continue;
+    }
+    if ((0, import_registry.isSelectorKey)(key)) {
+      const child = stringifyFurtherVal(val);
+      result[key] = canCollapse(child) ? child.in : child;
+      continue;
+    }
+    const shortKey = import_registry.propToAbbr[key] || key;
+    if (import_registry.PRESERVE_VALUE_KEYS.has(key) || import_registry.PRESERVE_VALUE_KEYS.has(shortKey)) {
+      result[shortKey] = val;
+      continue;
+    }
+    if (typeof val === "function") {
+      result[shortKey] = val;
+      continue;
+    }
+    if (val === null || val === void 0) {
+      result[shortKey] = val;
+      continue;
+    }
+    if (import_registry.SKIP_INLINE_KEYS.has(key) || import_registry.SKIP_INLINE_KEYS.has(shortKey)) {
+      result[shortKey] = val;
+      continue;
+    }
+    if (Array.isArray(val)) {
+      const hasObjects = val.some(function(item) {
+        return item !== null && typeof item === "object";
+      });
+      if (hasObjects) {
+        result[shortKey] = val.map(function(item) {
+          if (item !== null && typeof item === "object")
+            return stringifyFurther(item);
+          return item;
+        });
+        continue;
+      }
+      if (val.length <= 1) {
+        result[shortKey] = val;
+        continue;
+      }
+      tokens.push(shortKey + ":" + val.map(escapeValue).join(","));
+      continue;
+    }
+    if (typeof val === "object") {
+      result[shortKey] = stringifyFurther(val);
+      continue;
+    }
+    if (val === true) {
+      tokens.push(shortKey);
+      continue;
+    }
+    if (val === false) {
+      tokens.push("!" + shortKey);
+      continue;
+    }
+    if (typeof val === "number") {
+      tokens.push(shortKey + ":#" + val);
+      continue;
+    }
+    tokens.push(shortKey + ":" + escapeValue(val));
+  }
+  if (tokens.length) {
+    result.in = tokens.join(" ");
+  }
+  return result;
+}
+function stringifyFurtherVal(val) {
+  if (val === null || val === void 0) return val;
+  if (typeof val === "function") return val;
+  if (Array.isArray(val)) {
+    return val.map(function(item) {
+      if (item !== null && typeof item === "object")
+        return stringifyFurther(item);
+      return item;
+    });
+  }
+  if (typeof val === "object") return stringifyFurther(val);
+  return val;
+}
+function decodeFurtherValue(val) {
+  if (val.startsWith("#") && /^#-?\d+(\.\d+)?$/.test(val)) {
+    return Number(val.slice(1));
+  }
+  return unescapeValue(val);
+}
+function decodeFurtherInline(str) {
+  if (!str || typeof str !== "string") return {};
+  const obj = {};
+  const tokens = str.trim().split(/\s+/).filter(Boolean);
+  for (const token of tokens) {
+    if (token.startsWith("!")) {
+      const abbr2 = token.slice(1);
+      const prop2 = import_registry.abbrToProp[abbr2] || abbr2;
+      obj[prop2] = false;
+      continue;
+    }
+    const colonIdx = token.indexOf(":");
+    if (colonIdx === -1) {
+      const prop2 = import_registry.abbrToProp[token] || token;
+      obj[prop2] = true;
+      continue;
+    }
+    const abbr = token.slice(0, colonIdx);
+    const rawVal = token.slice(colonIdx + 1);
+    const prop = import_registry.abbrToProp[abbr] || abbr;
+    const parts = splitOnUnescapedCommas(rawVal);
+    if (parts.length > 1) {
+      obj[prop] = parts.map(decodeFurtherValue);
+      continue;
+    }
+    obj[prop] = decodeFurtherValue(rawVal);
+  }
+  return obj;
+}
+function parseFurther(obj) {
+  if (!obj || typeof obj !== "object") return obj;
+  if (Array.isArray(obj)) {
+    return obj.map(function(item) {
+      if (item !== null && typeof item === "object") return parseFurther(item);
+      return item;
+    });
+  }
+  const result = {};
+  if (typeof obj.in === "string") {
+    const decoded = decodeFurtherInline(obj.in);
+    for (const prop in decoded) {
+      result[prop] = decoded[prop];
+    }
+  }
+  for (const key in obj) {
+    if (key === "in") continue;
+    const val = obj[key];
+    if ((0, import_registry.isComponentKey)(key)) {
+      if (typeof val === "string") {
+        result[key] = decodeFurtherInline(val);
+      } else {
+        result[key] = parseFurtherVal(val);
+      }
+      continue;
+    }
+    const fullKey = import_registry.abbrToProp[key] || key;
+    if ((0, import_registry.isSelectorKey)(key) && fullKey === key) {
+      if (typeof val === "string") {
+        result[key] = decodeFurtherInline(val);
+      } else {
+        result[key] = parseFurtherVal(val);
+      }
+      continue;
+    }
+    if (import_registry.PRESERVE_VALUE_KEYS.has(fullKey) || import_registry.PRESERVE_VALUE_KEYS.has(key)) {
+      result[fullKey] = val;
+      continue;
+    }
+    result[fullKey] = parseFurtherVal(val);
+  }
+  return result;
+}
+function parseFurtherVal(val) {
+  if (val === null || val === void 0) return val;
+  if (typeof val === "function") return val;
+  if (Array.isArray(val)) {
+    return val.map(function(item) {
+      if (item !== null && typeof item === "object") return parseFurther(item);
+      return item;
+    });
+  }
+  if (typeof val === "object") return parseFurther(val);
+  return val;
+}

package/dist/cjs/index.js

@@ -27,11 +27,14 @@ __export(index_exports, {
   isComponentKey: () => import_registry.isComponentKey,
   isSelectorKey: () => import_registry.isSelectorKey,
   parse: () => import_decode.parse,
+  parseFurther: () => import_further.parseFurther,
   propToAbbr: () => import_registry.propToAbbr,
   shorten: () => import_encode.shorten,
-  stringify: () => import_encode.stringify
+  stringify: () => import_encode.stringify,
+  stringifyFurther: () => import_further.stringifyFurther
 });
 module.exports = __toCommonJS(index_exports);
 var import_encode = require("./encode.js");
 var import_decode = require("./decode.js");
+var import_further = require("./further.js");
 var import_registry = require("./registry.js");

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/shorthand",
   "description": "Shorthand syntax transpiler for Symbols properties",
   "author": "symbo.ls",
-  "version": "2.34.33",
+  "version": "2.34.35",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "src/index.js",
@@ -23,5 +23,5 @@
     "docs"
   ],
   "license": "ISC",
-  "gitHead": "a7ecaaa2792aea530bf0b4cef625904c63a0272a"
+  "gitHead": "0be12bcdd99c265fdeded6d756a1a3616a943ffc"
 }

package/src/further.js

@@ -0,0 +1,373 @@
+'use strict'
+
+import {
+  propToAbbr,
+  abbrToProp,
+  PRESERVE_VALUE_KEYS,
+  SKIP_INLINE_KEYS,
+  isComponentKey,
+  isSelectorKey
+} from './registry.js'
+
+// ── Value encoding ──
+
+/**
+ * Escape a value for the further-inlined `in` string.
+ *
+ * Handles characters that conflict with the token format:
+ *   \  →  \\    (literal backslash)
+ *   _  →  \_    (literal underscore, since _ normally means space)
+ *   ,  →  \,    (literal comma, since , normally means array separator)
+ *   ' ' →  _    (space encoded as underscore)
+ */
+function escapeValue(val) {
+  const str = String(val)
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/_/g, '\\_')
+    .replace(/,/g, '\\,')
+    .replace(/ /g, '_')
+}
+
+/**
+ * Unescape a value from the further-inlined `in` string.
+ * Processes character-by-character to handle escape sequences.
+ */
+function unescapeValue(val) {
+  let result = ''
+  let i = 0
+  while (i < val.length) {
+    if (val[i] === '\\' && i + 1 < val.length) {
+      const next = val[i + 1]
+      if (next === ',' || next === '_' || next === '\\') {
+        result += next
+        i += 2
+        continue
+      }
+    }
+    if (val[i] === '_') {
+      result += ' '
+    } else {
+      result += val[i]
+    }
+    i++
+  }
+  return result
+}
+
+/**
+ * Split a string on commas that are NOT escaped with backslash.
+ */
+function splitOnUnescapedCommas(str) {
+  const parts = []
+  let current = ''
+  let i = 0
+  while (i < str.length) {
+    if (str[i] === '\\' && i + 1 < str.length) {
+      current += str[i] + str[i + 1]
+      i += 2
+      continue
+    }
+    if (str[i] === ',') {
+      parts.push(current)
+      current = ''
+      i++
+      continue
+    }
+    current += str[i]
+    i++
+  }
+  parts.push(current)
+  return parts
+}
+
+// ── Encode ──
+
+/**
+ * Returns true if a recursed value can be collapsed from { in: '...' } to a bare string.
+ */
+function canCollapse(val) {
+  if (val === null || val === undefined) return false
+  if (typeof val !== 'object' || Array.isArray(val)) return false
+  const keys = Object.keys(val)
+  return keys.length === 1 && keys[0] === 'in' && typeof val.in === 'string'
+}
+
+/**
+ * Aggressively compress a Symbols component object.
+ *
+ * Beyond stringify(), this:
+ *   - Inlines numbers using # prefix:  zi:#100
+ *   - Inlines comma/underscore strings via escaping:  bxsh:black_.10\,_0px\,_2px
+ *   - Collapses children/selectors that only have `in` to bare strings:
+ *       Icon: 'nm:search bsz:A'          (instead of Icon: { in: '...' })
+ *       "@mobile": 'p:Y2_A'              (instead of "@mobile": { in: '...' })
+ *
+ * @param {Object} obj — Symbols component object
+ * @returns {Object} — further-compressed object
+ */
+export function stringifyFurther(obj) {
+  if (!obj || typeof obj !== 'object') return obj
+  if (Array.isArray(obj)) {
+    return obj.map(function (item) {
+      if (item !== null && typeof item === 'object')
+        return stringifyFurther(item)
+      return item
+    })
+  }
+
+  const result = {}
+  const tokens = []
+
+  for (const key in obj) {
+    const val = obj[key]
+
+    // PascalCase child → recurse, possibly collapse
+    if (isComponentKey(key)) {
+      const child = stringifyFurtherVal(val)
+      result[key] = canCollapse(child) ? child.in : child
+      continue
+    }
+
+    // Selector/media/case → recurse, possibly collapse
+    if (isSelectorKey(key)) {
+      const child = stringifyFurtherVal(val)
+      result[key] = canCollapse(child) ? child.in : child
+      continue
+    }
+
+    const shortKey = propToAbbr[key] || key
+
+    // Preserved keys (state, scope, attr, style, etc.) → keep as-is
+    if (PRESERVE_VALUE_KEYS.has(key) || PRESERVE_VALUE_KEYS.has(shortKey)) {
+      result[shortKey] = val
+      continue
+    }
+
+    // Functions → keep
+    if (typeof val === 'function') {
+      result[shortKey] = val
+      continue
+    }
+
+    // null/undefined → keep
+    if (val === null || val === undefined) {
+      result[shortKey] = val
+      continue
+    }
+
+    // Skip-inline keys (text, html, content, placeholder, src, href) → keep
+    if (SKIP_INLINE_KEYS.has(key) || SKIP_INLINE_KEYS.has(shortKey)) {
+      result[shortKey] = val
+      continue
+    }
+
+    // Arrays
+    if (Array.isArray(val)) {
+      const hasObjects = val.some(function (item) {
+        return item !== null && typeof item === 'object'
+      })
+      if (hasObjects) {
+        result[shortKey] = val.map(function (item) {
+          if (item !== null && typeof item === 'object')
+            return stringifyFurther(item)
+          return item
+        })
+        continue
+      }
+      // Single-element arrays can't round-trip (decoded as scalar)
+      if (val.length <= 1) {
+        result[shortKey] = val
+        continue
+      }
+      tokens.push(shortKey + ':' + val.map(escapeValue).join(','))
+      continue
+    }
+
+    // Objects → recurse
+    if (typeof val === 'object') {
+      result[shortKey] = stringifyFurther(val)
+      continue
+    }
+
+    // Booleans
+    if (val === true) {
+      tokens.push(shortKey)
+      continue
+    }
+    if (val === false) {
+      tokens.push('!' + shortKey)
+      continue
+    }
+
+    // Numbers → inline with # prefix for lossless round-trip
+    if (typeof val === 'number') {
+      tokens.push(shortKey + ':#' + val)
+      continue
+    }
+
+    // Strings → inline with escape sequences
+    tokens.push(shortKey + ':' + escapeValue(val))
+  }
+
+  if (tokens.length) {
+    result.in = tokens.join(' ')
+  }
+
+  return result
+}
+
+function stringifyFurtherVal(val) {
+  if (val === null || val === undefined) return val
+  if (typeof val === 'function') return val
+  if (Array.isArray(val)) {
+    return val.map(function (item) {
+      if (item !== null && typeof item === 'object')
+        return stringifyFurther(item)
+      return item
+    })
+  }
+  if (typeof val === 'object') return stringifyFurther(val)
+  return val
+}
+
+// ── Decode ──
+
+/**
+ * Decode a single further-inline value.
+ * Handles # prefix for numbers and escape sequences.
+ * Only treats # as a number marker when followed by a strict decimal number
+ * (avoids conflict with CSS hex colors like #1E2397).
+ */
+function decodeFurtherValue(val) {
+  if (val.startsWith('#') && /^#-?\d+(\.\d+)?$/.test(val)) {
+    return Number(val.slice(1))
+  }
+  return unescapeValue(val)
+}
+
+/**
+ * Decode a further `in` string into key-value pairs with full property names.
+ */
+function decodeFurtherInline(str) {
+  if (!str || typeof str !== 'string') return {}
+
+  const obj = {}
+  const tokens = str.trim().split(/\s+/).filter(Boolean)
+
+  for (const token of tokens) {
+    if (token.startsWith('!')) {
+      const abbr = token.slice(1)
+      const prop = abbrToProp[abbr] || abbr
+      obj[prop] = false
+      continue
+    }
+
+    const colonIdx = token.indexOf(':')
+
+    if (colonIdx === -1) {
+      const prop = abbrToProp[token] || token
+      obj[prop] = true
+      continue
+    }
+
+    const abbr = token.slice(0, colonIdx)
+    const rawVal = token.slice(colonIdx + 1)
+    const prop = abbrToProp[abbr] || abbr
+
+    const parts = splitOnUnescapedCommas(rawVal)
+    if (parts.length > 1) {
+      obj[prop] = parts.map(decodeFurtherValue)
+      continue
+    }
+
+    obj[prop] = decodeFurtherValue(rawVal)
+  }
+
+  return obj
+}
+
+/**
+ * Decode a stringifyFurther result back to the original component object.
+ *
+ * Handles:
+ *   - String PascalCase values → decode as inline props
+ *   - String selector/media/case values → decode as inline props
+ *   - #number prefix → actual JS number
+ *   - Escape sequences: \, → ,   \_ → _   \\ → \
+ *   - Abbreviated keys → full property names
+ *
+ * @param {Object} obj — stringifyFurther result
+ * @returns {Object} — original Symbols component object
+ */
+export function parseFurther(obj) {
+  if (!obj || typeof obj !== 'object') return obj
+  if (Array.isArray(obj)) {
+    return obj.map(function (item) {
+      if (item !== null && typeof item === 'object') return parseFurther(item)
+      return item
+    })
+  }
+
+  const result = {}
+
+  // Decode `in` string first so its props come first
+  if (typeof obj.in === 'string') {
+    const decoded = decodeFurtherInline(obj.in)
+    for (const prop in decoded) {
+      result[prop] = decoded[prop]
+    }
+  }
+
+  for (const key in obj) {
+    if (key === 'in') continue
+
+    const val = obj[key]
+
+    // PascalCase child
+    if (isComponentKey(key)) {
+      if (typeof val === 'string') {
+        result[key] = decodeFurtherInline(val)
+      } else {
+        result[key] = parseFurtherVal(val)
+      }
+      continue
+    }
+
+    // Resolve abbreviation
+    const fullKey = abbrToProp[key] || key
+
+    // Selector/media/case key (NOT an event abbreviation)
+    if (isSelectorKey(key) && fullKey === key) {
+      if (typeof val === 'string') {
+        result[key] = decodeFurtherInline(val)
+      } else {
+        result[key] = parseFurtherVal(val)
+      }
+      continue
+    }
+
+    // Preserved keys (state, scope, etc.) → keep value as-is
+    if (PRESERVE_VALUE_KEYS.has(fullKey) || PRESERVE_VALUE_KEYS.has(key)) {
+      result[fullKey] = val
+      continue
+    }
+
+    result[fullKey] = parseFurtherVal(val)
+  }
+
+  return result
+}
+
+function parseFurtherVal(val) {
+  if (val === null || val === undefined) return val
+  if (typeof val === 'function') return val
+  if (Array.isArray(val)) {
+    return val.map(function (item) {
+      if (item !== null && typeof item === 'object') return parseFurther(item)
+      return item
+    })
+  }
+  if (typeof val === 'object') return parseFurther(val)
+  return val
+}

package/src/index.js

@@ -2,6 +2,7 @@
 
 export { encode, shorten, stringify } from './encode.js'
 export { decode, expand, parse } from './decode.js'
+export { stringifyFurther, parseFurther } from './further.js'
 export {
   propToAbbr,
   abbrToProp,