@symbo.ls/default-config 3.8.9 → 3.14.1

package/components/Atoms/InteractiveComponent.js

@@ -0,0 +1,65 @@
+'use strict'
+
+const style = {
+  appearance: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit'
+}
+
+export const Hoverable = {
+  transition: 'C defaultBezier',
+  transitionProperty: 'opacity, transform',
+  opacity: 0.85,
+
+  ':hover': {
+    opacity: 0.9,
+    transform: 'scale(1.015)'
+  },
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1,
+    transform: 'scale(1.015)',
+
+    ':hover': { opacity: 1 }
+  }
+}
+
+export const Clickable = {
+  extends: 'Hoverable',
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1
+  }
+}
+
+export const Focusable = {
+  border: 'none',
+  outline: 'solid 0 blue.3',
+  ':focus-visible': {
+    opacity: 1,
+    outline: 'solid X blue.3'
+  },
+
+  attr: {
+    tabIndex: (el) => el.tabIndex
+  }
+}
+
+export const FocusableComponent = {
+  extends: 'Focusable',
+  tag: 'button',
+  fontSize: 'A',
+  type: 'button',
+  border: 'none',
+  textDecoration: 'none',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  fontFamily: 'inherit',
+  style
+}

package/components/Atoms/Picture.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { getSystemGlobalTheme } from './Theme.js'
+
+export const Picture = {
+  deps: { getSystemGlobalTheme },
+  tag: 'picture',
+
+  childExtends: {
+    deps: { getSystemGlobalTheme },
+    tag: 'source',
+    attr: {
+      media: (element) => {
+        const { key, context, deps } = element
+        const { media } = context.designSystem
+        const globalTheme = deps.getSystemGlobalTheme(element)
+        const mediaName = (element.media || key).slice(1)
+
+        if (mediaName === globalTheme) return '(min-width: 0px)'
+        else if (mediaName === 'dark' || mediaName === 'light')
+          return '(max-width: 0px)'
+
+        return media[mediaName]
+      }
+    }
+  },
+
+  Img: {
+    width: 'inherit',
+    ignoreChildExtends: true,
+    height: 'inherit',
+    src: (element, state) => element.parent?.src || state.src
+  }
+}

package/components/Atoms/Shape/index.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export * from '../Shape.js'

package/components/Atoms/Shape.js

@@ -0,0 +1,249 @@
+'use strict'
+
+import { exec } from '@symbo.ls/utils'
+import { getActiveConfig, getColor, getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
+import { TIMING_PROPS } from 'css-in-props/src/props'
+
+const CONFIG = getActiveConfig()
+
+export const depth = {
+  4: {
+    boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.unit.default} 4${CONFIG.unit.default}`
+  },
+  6: {
+    boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.unit.default} 6${CONFIG.unit.default}`
+  },
+  10: {
+    boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.unit.default} 10${CONFIG.unit.default}`
+  },
+  16: {
+    boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.unit.default} 16${CONFIG.unit.default}`
+  },
+  26: {
+    boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.unit.default} 26${CONFIG.unit.default}`
+  },
+  42: {
+    boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.unit.default} 42${CONFIG.unit.default}`
+  }
+}
+
+const getComputedBackgroundColor = (el) => {
+  return (
+    getColor(el.shapeDirectionColor) ||
+    getColor(el.borderColor) ||
+    getColor(el.backgroundColor) ||
+    getColor(el.background)
+  )
+}
+
+const inheritTransition = (el) => {
+  const result = TIMING_PROPS.transition(el.transition, el)
+  return result && result.transition
+}
+
+export const SHAPES = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tv: {
+    borderRadius: '1.15em/2.5em'
+  },
+
+  tooltip: (el) => ({
+    position: el.position || 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: '.35em solid',
+      borderColor: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'border-color',
+      position: 'absolute',
+      borderRadius: '.15em'
+    }
+  }),
+
+  tooltipDirection: {
+    top: {
+      '&:before': {
+        top: '0',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        right: '0',
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        bottom: '0',
+        left: '50%',
+        transform: 'translate(-50%, 50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        left: '0',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  tag: (el) => ({
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background',
+      borderRadius: '.25em',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%'
+    }
+  }),
+
+  tagDirection: {
+    top: {
+      '&:before': {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translate(-50%, 50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        left: '100%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        top: '100%',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        right: '100%',
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  hexagon: (el) => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      borderRadius: '.25em',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      left: '0',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    },
+    '&:after': {
+      left: '100%',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    }
+  }),
+
+  chevron: (el) => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%)`
+    },
+    '&:after': {
+      background: getComputedBackgroundColor(el),
+      borderRadius: '.25em'
+    }
+  }),
+
+  chevronDirection: {
+    left: {
+      '&:before': {
+        height: '100%',
+        left: '100%',
+        transform: 'translate3d(-1%, -50%, 1px) scale(-1, 1)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '0',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        height: '100%',
+        left: '0',
+        transform: 'translate3d(-99%, -50%, 1px)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '100%',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    }
+  }
+}
+
+export const Shape = {
+  deps: { exec, getSpacingBasedOnRatio, getMediaColor },
+
+  classlist: {
+    shape: (el) => {
+      return el.deps.exec(SHAPES[el.shape], el)
+    },
+    shapeDirection: (el) => {
+      if (!el.shape || !el.shapeDirection) return
+      const shapeDir = SHAPES[el.shape + 'Direction']
+      return el.shape && shapeDir ? shapeDir[el.shapeDirection || 'left'] : null
+    },
+    shapeDirectionColor: (el) => {
+      const borderColor = {
+        borderColor: el.deps.getMediaColor(el.background || el.backgroundColor)
+      }
+      return el.shapeDirection ? borderColor : null
+    }
+  }
+}
+
+export const Circle = {
+  round: '100%'
+}
+
+export default Shape

package/components/Atoms/Svg.js

@@ -0,0 +1,78 @@
+'use strict'
+
+// create SVG symbol
+export const Svg = {
+  tag: 'svg',
+  attr: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+  },
+  html: (el) => {
+    const { context } = el
+    if (el.semanticIcons) return
+    if (el.html && typeof el.html !== 'function') return el.call('exec', el.html, el)
+
+    const { designSystem, utils } = context
+    const SVG = designSystem && designSystem.svg
+    const useSvgSprite = el.spriteId || (designSystem && designSystem.useSvgSprite)
+
+    const src = el.call('exec', el.src, el)
+    if (!useSvgSprite && src) return src
+
+    const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
+
+    const spriteId = el.spriteId
+    if (spriteId) return useSVGSymbol(spriteId)
+
+    if (SVG && SVG[src]) return useSVGSymbol(src)
+
+    const symbolId = Symbol.for(src)
+    let SVGKey = SVG[symbolId]
+    if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
+
+    // FA-L3: when `el.src` is a sprite symbol NAME (string) but the symbol
+    // isn't registered in the merged sprite, the previous code allocated
+    // `Math.random()` as the href, producing `<use href="#0.7878391…">`
+    // which never resolves and silently renders nothing. That made every
+    // missing icon a needle-in-haystack visual bug.
+    //
+    // New behavior:
+    //   - If `src` is missing entirely: emit an empty `<use>` (no href).
+    //   - If `src` is a string (sprite-symbol lookup) but unknown: warn
+    //     in dev and render no `<use>`. The console-warn surfaces the
+    //     bad icon name to the consumer.
+    //   - If `src` is an actual SVG body string (registered raw via
+    //     `utils.init({svg:{…}})` — the original Math.random path): keep
+    //     a stable hash-derived key instead of Math.random so the same
+    //     SVG body always resolves to the same symbol id (and so SSR /
+    //     hydration produce identical output).
+    if (!src) return useSVGSymbol('')
+
+    if (typeof src === 'string' && !src.includes('<')) {
+      // Bare symbol name — not in sprite. Warn loudly in dev so the
+      // consumer fixes the icon name; render nothing rather than a
+      // broken random href.
+      if (typeof console !== 'undefined' && console.warn) {
+        console.warn(`[Svg] Unknown sprite symbol "${src}" — not registered in design-system sprite. Set the icon name to one that exists in designSystem.icons / context.svg, or register the SVG body via utils.init({ svg: { '${src}': '<svg>...</svg>' } }).`)
+      }
+      return useSVGSymbol('')
+    }
+
+    // Inline SVG body — derive a stable sha-like key from the content so
+    // identical bodies share a sprite symbol across renders. Avoids
+    // Math.random churn in SSR diffs.
+    let hash = 0
+    for (let i = 0; i < src.length; i++) {
+      hash = ((hash << 5) - hash + src.charCodeAt(i)) | 0
+    }
+    SVGKey = SVG[symbolId] = `svg-${(hash >>> 0).toString(36)}`
+    utils.init({
+      svg: { [SVGKey]: src }
+    }, {
+      document: context.document,
+      emotion: context.emotion
+    })
+
+    return useSVGSymbol(SVGKey)
+  }
+}

package/components/Atoms/Text.js

@@ -0,0 +1,45 @@
+'use strict'
+
+export const Text = {}
+
+export const Span = { tag: 'span' }
+
+export const H1 = { tag: 'h1' }
+export const H2 = { tag: 'h2' }
+export const H3 = { tag: 'h3' }
+export const H4 = { tag: 'h4' }
+export const H5 = { tag: 'h5' }
+export const H6 = { tag: 'h6' }
+export const P = { tag: 'p' }
+export const Caption = { tag: 'caption' }
+export const Strong = {
+  tag: 'strong',
+  fontWeight: '700'
+}
+export const U = { tag: 'u' }
+export const Underline = { tag: 'u' }
+export const Italic = { tag: 'i' }
+
+export const Title = {}
+
+export const Headline = {
+  tag: 'h6',
+  fontSize: 'B',
+  fontWeight: 500
+}
+
+export const Subhead = {
+  tag: 'span',
+  fontSize: 'Z1'
+}
+
+export const Footnote = {
+  tag: 'span',
+  fontSize: 'Z'
+}
+
+export const B = { tag: 'b' }
+
+export const I = { tag: 'i' }
+
+export const Data = { tag: 'data' }

package/components/Atoms/Theme.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { depth } from './Shape.js'
+import { isUndefined } from '@symbo.ls/utils'
+
+export const getSystemGlobalTheme = ({ context, state }) => {
+  const rootState = state && state.root
+  const theme = (rootState && rootState.globalTheme) || (context.designSystem && context.designSystem.globalTheme)
+  return theme === 'auto' ? null : theme
+}
+
+export const Theme = {
+  deps: {
+    depth
+  },
+
+  classlist: {
+    depth: (el) => !isUndefined(el.depth) && el.deps.depth[el.depth]
+  }
+}

package/components/Atoms/Video.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { resolveAsset } from '@symbo.ls/utils'
+
+/**
+ * `<video>` with smart asset resolution. Set `src` to either a manifest
+ * key (local-discovered or cloud-uploaded) or a literal URL — the
+ * component figures out which one and emits `<source>` children only
+ * when the manifest carries multiple variants.
+ *
+ * Same `src`-prop convention as `<img>` and `<audio>`. See
+ * `resolveAsset` in `@symbo.ls/utils` for the normalization rules.
+ */
+export const Video = {
+  tag: 'video',
+
+  controls: true,
+
+  attr: {
+    src: (el) => {
+      const asset = resolveAsset(el)
+      return (asset && asset.src) || el.src
+    }
+  },
+
+  // Auto-populate <source> children only when the resolved asset carries
+  // a variants array. Returns undefined otherwise so DOMQL's extends
+  // chain falls through to user-provided `children: [...]` when present
+  // (override semantics) or to the empty list. Reading `el.children`
+  // inside this function would recursively re-enter it — never do that.
+  children: (el) => {
+    const asset = resolveAsset(el)
+    if (!asset || !Array.isArray(asset.variants) || !asset.variants.length) {
+      return undefined
+    }
+    return asset.variants.map((v) => ({
+      tag: 'source',
+      attr: { src: v.src, type: v.format }
+    }))
+  },
+
+  childExtends: {
+    tag: 'source'
+  }
+}

package/components/Avatar.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const Avatar = {
+  extends: 'Img',
+  display: 'block',
+  avatarType: 'adventurer-neutral',
+  borderRadius: '100%',
+  boxSize: 'C+X C+X',
+  src: el => `https://api.dicebear.com/7.x/${el.avatarType || 'initials'}/svg?seed=${el.key || 'no-avatar'}`
+}

package/components/Button.js

@@ -0,0 +1,72 @@
+'use strict'
+
+/**
+ * A Button component
+ * The `Button` component represents a clickable button element with customizable styles and properties.
+ *
+ * @description
+ * @extends {FocusableComponent, IconText}
+ * @typedef {Object} Button
+ * @property {string} tag - The HTML tag used to render the button (e.g., 'button').
+ * @property {string} props.type - The type attribute of the button ('button' by default).
+ *
+ * @example
+ * // Example usage of the Button component:
+ * const myButton = {
+ *   extends: Button
+ * }
+ */
+
+export const Button = {
+  extends: ['IconText', 'FocusableComponent'],
+  tag: 'button',
+
+  fontSize: 'A',
+  type: 'button',
+  borderStyle: 'none',
+  display: 'inline-flex',
+  align: 'center center',
+  textDecoration: 'none',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  padding: 'Z B2',
+  fontWeight: '500',
+  fontFamily: 'inherit',
+  round: 'C2',
+
+  disabled: (el) => el.call('exec', el.disabled)
+}
+
+export const SquareButton = {
+  extends: 'Button',
+  fontSize: 'A',
+  width: 'A',
+  padding: 'Z',
+  aspectRatio: '1 / 1',
+  icon: 'smile',
+  boxSize: 'fit-content fit-content',
+  justifyContent: 'center',
+  round: 'Z2',
+  boxSizing: 'content-box'
+}
+
+export const CircleButton = {
+  extends: 'SquareButton',
+  round: 'C'
+}
+
+export const KangorooButton = {
+  extends: 'Button',
+  childExtends: 'IconText'
+}
+
+export const ButtonSet = {
+  tag: 'nav',
+  display: 'flex',
+  childExtends: 'SquareButton'
+}
+
+export const IconButton = {
+  extends: ['SquareButton', 'ClickableItem'],
+  round: 'Z'
+}

package/components/Dialog.js

@@ -0,0 +1,69 @@
+'use strict'
+
+export const Dialog = {
+  display: 'flex',
+  tag: 'dialog',
+  flow: 'column',
+  border: '0',
+  theme: 'dialog',
+  round: 'Z2'
+}
+
+export const DialogHeader = {
+  extends: 'Hgroup',
+
+  minWidth: '100%',
+  gap: 'A',
+
+  Title: {
+    align: 'center space-between',
+
+    Text: { text: 'Title' },
+
+    SquareButton: {
+      icon: 'x',
+      theme: 'transparent'
+    }
+  },
+
+  Paragraph: {
+    color: 'caption'
+  }
+}
+
+export const DialogFooter = {
+  display: 'flex',
+
+  align: 'center flex-end',
+  gap: 'X2',
+  margin: 'auto - -',
+  padding: 'Y2 X2',
+
+  childExtends: {
+    extends: 'Button',
+    textTransform: 'uppercase',
+    background: 'transparent',
+    '@dark': {
+      theme: 'primary @dark .color-only'
+    },
+    '@light': {
+      theme: 'primary @light .color-only'
+    },
+    '&': {
+      padding: 'Z A'
+    },
+    ':hover': {
+      theme: 'tertiary'
+    },
+    ':active': {
+      background: 'white.1'
+    }
+  },
+
+  Cancel: {
+    text: 'cancel'
+  },
+  Ok: {
+    text: 'ok'
+  }
+}