@symbo.ls/scratch 3.14.0 → 3.14.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "files": [
     "dist",
     "*.js",

package/src/utils/sprite.js

@@ -20,10 +20,10 @@ export const generateSprite = (icons) => {
 }
 
 const parseRootAttributes = (htmlString) => {
-  const val = htmlString.default || htmlString
+  const val = htmlString && (htmlString.default || htmlString)
   if (!isString(val)) {
     if (isDev) console.warn('parseRootAttributes:', val, 'is not a string')
-    return
+    return {}  // empty attrs — caller destructures `width`/`height`, must not crash
   }
 
   const match = val.match(/<svg\s+(.*?)>/)
@@ -35,6 +35,7 @@ const parseRootAttributes = (htmlString) => {
   const attrs = attrString.match(
     /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
   )
+  if (!attrs) return {}  // attr regex sometimes returns null on minimal SVG; same safety
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split('=')
     acc[key] = value.replace(/['"]/g, '')
@@ -42,18 +43,34 @@ const parseRootAttributes = (htmlString) => {
   }, {})
 }
 
+// Rewrite every internal id="…" + url(#…) reference inside an SVG body
+// with a deterministic suffix derived from the symbol key + the original
+// id. Same input SVG + same key → same output, every render.
+//
+// Previous behavior had three bugs that compounded:
+//   1. `idRegex` had no `g` flag, so `.replace(idRegex, …)` only swapped
+//      the FIRST `id="…"` match. SVGs with multiple ids (filters,
+//      gradients, masks, clipPaths) lost references.
+//   2. `Math.random()` was the per-iteration suffix, so the same SVG got
+//      different ids on every call → SSR-rendered DOM never matched the
+//      hydrate pass and one symbol's filter could fail to match its url().
+//   3. Each iteration reset `replacedCode = code` (instead of chaining),
+//      so even though the loop ran N times it only ever produced one
+//      single-id swap.
 const replaceIdsAndUrls = (code, key) => {
-  const idRegex = /id="([^"]*)"/
-  const urlRegex = /url\(#([^)]*)\)/g
-  const matches = code.match(/id="([^"]*)"/g)
+  const ids = []
+  code.replace(/id="([^"]*)"/g, (_, id) => { ids.push(id); return _ })
+  if (!ids.length) return code
+
   let replacedCode = code
-  if (isArray(matches)) {
-    matches.forEach(() => {
-      const randomKey = Math.floor(Math.random() * 100000)
-      replacedCode = code
-        .replace(idRegex, `id="${key}-${randomKey}"`)
-        .replace(urlRegex, `url(#${key}-${randomKey})`)
-    })
+  for (const origId of ids) {
+    const escaped = origId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const newId = `${key}-${origId}`
+    replacedCode = replacedCode
+      .replace(new RegExp(`id="${escaped}"`, 'g'), `id="${newId}"`)
+      .replace(new RegExp(`url\\(#${escaped}\\)`, 'g'), `url(#${newId})`)
+      .replace(new RegExp(`xlink:href="#${escaped}"`, 'g'), `xlink:href="#${newId}"`)
+      .replace(new RegExp(`href="#${escaped}"`, 'g'), `href="#${newId}"`)
   }
   return replacedCode
 }

package/dist/esm/defaultConfig/animation.js

@@ -1,4 +0,0 @@
-const animation = {};
-export {
-  animation
-};

package/dist/esm/defaultConfig/cases.js

@@ -1,4 +0,0 @@
-const cases = {};
-export {
-  cases
-};

package/dist/esm/defaultConfig/class.js

@@ -1,4 +0,0 @@
-const defaultProps = {};
-export {
-  defaultProps as class
-};

package/dist/esm/defaultConfig/color.js

@@ -1,11 +0,0 @@
-var proto = {
-  // eslint-disable-line
-  name: "",
-  value: ""
-};
-const color = {};
-const gradient = {};
-export {
-  color,
-  gradient
-};

package/dist/esm/defaultConfig/document.js

@@ -1,4 +0,0 @@
-const document = {};
-export {
-  document
-};

package/dist/esm/defaultConfig/font-family.js

@@ -1,18 +0,0 @@
-var defaultFont = {
-  // eslint-disable-line
-  name: "",
-  family: "",
-  type: ""
-};
-const fontFamily = {};
-const fontFamilyTypes = {
-  "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
-  serif: "Times New Roman, Georgia, serif, --system-default",
-  monospace: "Courier New, monospace, --system-default"
-};
-const fontFace = {};
-export {
-  fontFace,
-  fontFamily,
-  fontFamilyTypes
-};

package/dist/esm/defaultConfig/font.js

@@ -1,13 +0,0 @@
-var defFont = {
-  // eslint-disable-line
-  name: "",
-  url: "",
-  fontStyle: "",
-  fontWeight: 500,
-  fontStretch: "normal",
-  fontOpticalSizing: "auto"
-};
-const font = {};
-export {
-  font
-};

package/dist/esm/defaultConfig/grid.js

@@ -1,5 +0,0 @@
-const defaultProps = {};
-const grid = defaultProps;
-export {
-  grid
-};

package/dist/esm/defaultConfig/icons.js

@@ -1,6 +0,0 @@
-const icons = {};
-const semanticIcons = {};
-export {
-  icons,
-  semanticIcons
-};

package/dist/esm/defaultConfig/index.js

@@ -1,25 +0,0 @@
-export * from "./sequence.js";
-export * from "./unit.js";
-export * from "./typography.js";
-export * from "./font.js";
-export * from "./font-family.js";
-export * from "./media.js";
-export * from "./spacing.js";
-export * from "./color.js";
-export * from "./theme.js";
-export * from "./shadow.js";
-export * from "./icons.js";
-export * from "./timing.js";
-export * from "./document.js";
-export * from "./responsive.js";
-export * from "./animation.js";
-export * from "./svg.js";
-export * from "./templates.js";
-export * from "./grid.js";
-export * from "./class.js";
-const reset = {};
-const vars = {};
-export {
-  reset,
-  vars
-};

package/dist/esm/defaultConfig/media.js

@@ -1,9 +0,0 @@
-const media = {
-  tv: "(min-width: 2780px)",
-  light: "(prefers-color-scheme: light)",
-  dark: "(prefers-color-scheme: dark)",
-  print: "print"
-};
-export {
-  media
-};

package/dist/esm/defaultConfig/responsive.js

@@ -1,30 +0,0 @@
-const breakpoints = {
-  screenL: 1920,
-  screenM: 1680,
-  screenS: 1440,
-  tabletL: 1366,
-  tabletM: 1280,
-  tabletS: 1024,
-  mobileL: 768,
-  mobileM: 560,
-  mobileS: 480,
-  mobileXS: 375
-};
-const devices = {
-  screenXXL: [2560, 1440],
-  screenXL: [2240, 1260],
-  screenL: [1920, 1024],
-  screenM: [1680, 1024],
-  screenS: [1440, 720],
-  tabletL: [1366, 926],
-  tabletM: [1280, 768],
-  tabletS: [1024, 768],
-  mobileL: [768, 375],
-  mobileM: [560, 768],
-  mobileS: [480, 768],
-  mobileXS: [375, 768]
-};
-export {
-  breakpoints,
-  devices
-};

package/dist/esm/defaultConfig/sequence.js

@@ -1,29 +0,0 @@
-const sequence = {
-  "minor-second": 1.067,
-  "major-second": 1.125,
-  "minor-third": 1.2,
-  "major-third": 1.25,
-  "perfect-fourth": 1.333,
-  "augmented-fourth": 1.414,
-  "perfect-fifth": 1.5,
-  "minor-sixth": 1.6,
-  phi: 1.618,
-  // golden-ratio
-  "major-sixth": 1.667,
-  "square-root-3": 1.732,
-  // theodorus
-  "minor-seventh": 1.778,
-  "major-seventh": 1.875,
-  octave: 2,
-  "square-root-5": 2.23,
-  // pythagoras
-  "major-tenth": 2.5,
-  "major-eleventh": 2.667,
-  "major-twelfth": 3,
-  pi: 3.14,
-  // archimedes
-  "double-octave": 4
-};
-export {
-  sequence
-};

package/dist/esm/defaultConfig/shadow.js

@@ -1,4 +0,0 @@
-const shadow = {};
-export {
-  shadow
-};

package/dist/esm/defaultConfig/spacing.js

@@ -1,18 +0,0 @@
-import { sequence } from "./sequence.js";
-import { typography } from "./typography.js";
-const defaultProps = {
-  base: typography.base,
-  type: "spacing",
-  ratio: sequence.phi,
-  range: [-5, 15],
-  subSequence: true,
-  mediaRegenerate: false,
-  unit: "em",
-  sequence: {},
-  scales: {},
-  vars: {}
-};
-const spacing = defaultProps;
-export {
-  spacing
-};

package/dist/esm/defaultConfig/svg.js

@@ -1,6 +0,0 @@
-const svg = {};
-const svgData = {};
-export {
-  svg,
-  svgData
-};

package/dist/esm/defaultConfig/templates.js

@@ -1,4 +0,0 @@
-const templates = {};
-export {
-  templates
-};

package/dist/esm/defaultConfig/theme.js

@@ -1,16 +0,0 @@
-const themeA = {
-  // eslint-disable-line no-unused-vars
-  text: "blue",
-  background: "white",
-  border: "black",
-  // .opacity(0.2),
-  active: {},
-  helpers: [],
-  themes: {},
-  inverse: {}
-  // schemeAInverse
-};
-const theme = {};
-export {
-  theme
-};

package/dist/esm/defaultConfig/timing.js

@@ -1,17 +0,0 @@
-import { sequence } from "./sequence.js";
-const defaultProps = {
-  default: 150,
-  base: 150,
-  type: "timing",
-  ratio: sequence["perfect-fourth"],
-  range: [-3, 12],
-  mediaRegenerate: false,
-  unit: "ms",
-  sequence: {},
-  scales: {},
-  vars: {}
-};
-const timing = defaultProps;
-export {
-  timing
-};

package/dist/esm/defaultConfig/typography.js

@@ -1,21 +0,0 @@
-import { sequence } from "./sequence.js";
-const defaultProps = {
-  browserDefault: 16,
-  base: 16,
-  type: "font-size",
-  ratio: sequence["minor-third"],
-  range: [-3, 12],
-  h1Matches: 6,
-  lineHeight: 1.5,
-  subSequence: true,
-  mediaRegenerate: false,
-  unit: "em",
-  templates: {},
-  sequence: {},
-  scales: {},
-  vars: {}
-};
-const typography = defaultProps;
-export {
-  typography
-};

package/dist/esm/defaultConfig/unit.js

@@ -1,6 +0,0 @@
-const unit = {
-  default: "em"
-};
-export {
-  unit
-};

package/dist/esm/factory.js

@@ -1,120 +0,0 @@
-import {
-  deepClone,
-  deepMerge,
-  isDefined,
-  isObject
-} from "@symbo.ls/utils";
-import * as CONF from "./defaultConfig/index.js";
-const cssVars = {};
-const cssMediaVars = {};
-const _CONF = CONF;
-const _confLower = {};
-const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
-for (const key in _CONF) {
-  const lower = key.toLowerCase();
-  _confLower[lower] = _CONF[key];
-  const camel = toCamel(lower);
-  if (camel !== lower) _confLower[camel] = _CONF[key];
-  if (lower !== key) _confLower[key] = _CONF[key];
-}
-const CONFIG = {
-  verbose: false,
-  useVariable: true,
-  useReset: true,
-  globalTheme: "auto",
-  cssVars,
-  cssMediaVars,
-  CSS_VARS: cssVars,
-  CSS_MEDIA_VARS: cssMediaVars,
-  _scratchConfig: true,
-  ..._confLower
-};
-const cachedConfig = deepClone(CONFIG);
-const FACTORY = {
-  active: "0",
-  0: CONFIG
-};
-const activateConfig = (def) => {
-  if (isDefined(def)) {
-    FACTORY.active = def;
-  }
-  return FACTORY[def || FACTORY.active];
-};
-const configStack = [];
-const pushConfig = (config) => {
-  if (config && config._scratchConfig) configStack.push(config);
-};
-const popConfig = () => {
-  configStack.pop();
-};
-const getActiveConfig = (def) => {
-  if (configStack.length) return configStack[configStack.length - 1];
-  return FACTORY[def || FACTORY.active] || CONFIG;
-};
-const setActiveConfig = (newConfig) => {
-  if (!isObject(newConfig)) return;
-  FACTORY.active = "1";
-  FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
-  return newConfig;
-};
-const APP_FLAGS = [
-  "useReset",
-  "useVariable",
-  "useFontImport",
-  "useIconSprite",
-  "useSvgSprite",
-  "useDocumentTheme",
-  "useDefaultIcons",
-  "useDefaultConfig",
-  "verbose",
-  "globalTheme"
-];
-const ALIAS_GROUPS = [
-  ["fontfamily", "fontFamily", "font_family"],
-  ["fontfamilytypes", "fontFamilyTypes"],
-  ["semanticicons", "semanticIcons"],
-  ["svgdata", "svgData"]
-];
-const aliasCaseVariants = (cfg) => {
-  for (const vs of ALIAS_GROUPS) {
-    let merged;
-    for (const v of vs) {
-      const val = cfg[v];
-      if (!isObject(val)) continue;
-      merged = merged ? deepMerge(val, merged) : val;
-    }
-    if (!merged) continue;
-    for (const v of vs) if (isObject(cfg[v])) cfg[v] = merged;
-  }
-};
-const createConfig = (name, overrides, { cleanBase = false } = {}) => {
-  const activeBase = cleanBase ? null : getActiveConfig();
-  const base = deepClone(
-    !cleanBase && activeBase && activeBase._scratchConfig ? activeBase : cachedConfig
-  );
-  for (const flag of APP_FLAGS) {
-    delete base[flag];
-  }
-  const cfg = deepMerge(overrides || {}, base);
-  cfg.cssVars = {};
-  cfg.cssMediaVars = {};
-  cfg.CSS_VARS = cfg.cssVars;
-  cfg.CSS_MEDIA_VARS = cfg.cssMediaVars;
-  cfg._scratchConfig = true;
-  aliasCaseVariants(cfg);
-  if (name) FACTORY[name] = cfg;
-  return cfg;
-};
-export {
-  CONFIG,
-  FACTORY,
-  activateConfig,
-  createConfig,
-  cssMediaVars,
-  cssVars,
-  getActiveConfig,
-  popConfig,
-  pushConfig,
-  setActiveConfig,
-  toCamel
-};

package/dist/esm/index.js

@@ -1,14 +0,0 @@
-import * as scratchUtils from "./utils/index.js";
-import * as scratchSystem from "./system/index.js";
-import * as scratchDefaultConfig from "./defaultConfig/index.js";
-export * from "./factory.js";
-export * from "./defaultConfig/index.js";
-export * from "./system/index.js";
-export * from "./utils/index.js";
-export * from "./transforms/index.js";
-export * from "./set.js";
-export {
-  scratchDefaultConfig,
-  scratchSystem,
-  scratchUtils
-};