@weft-js/warp-icons 0.1.0 → 0.1.2

package/src/icon.tsx

@@ -1,6 +1,11 @@
 // `<Icon name>`. Literal names compile to the icon itself; what reaches this file is a name the build could only bound,
 // or not bound at all, and @weft-js/warp-icons/names holds exactly those.
-import { resolve, type IconActionName, type IconName, type IconVariant } from '@weft-js/warp-icons/names'
+import {
+  resolve,
+  type IconActionName,
+  type IconName,
+  type IconVariant,
+} from '@weft-js/warp-icons/names'
 import { untrack } from '@weft-js/core'
 import type { IconTrigger } from './action'
 import type { IconComponent, IconProps } from './svg'
@@ -9,10 +14,18 @@ export type { IconName, IconVariant }
 /** An icon by name, or the icon itself. */
 export type IconRef = IconName | IconComponent
 /** `<Icon>`'s props: a name, and `solid` or `action` with a name that has one. */
-export type IconByNameProps = ({ name: IconRef; solid?: boolean; action?: undefined } | { name: IconActionName; action: IconTrigger | boolean; solid?: undefined }) & IconProps
+export type IconByNameProps = (
+  | { name: IconRef; solid?: boolean; action?: undefined }
+  | { name: IconActionName; action: IconTrigger | boolean; solid?: undefined }
+) &
+  IconProps
 
 /** An icon by name. A literal name compiles to the icon itself; anything else is looked up at runtime. */
 export function Icon({ name, solid, ...rest }: IconByNameProps) {
-  const Draw = untrack(() => (typeof name === 'function' ? name : resolve(name, rest.action ? 'action' : solid ? 'solid' : undefined)))
+  const Draw = untrack(() =>
+    typeof name === 'function'
+      ? name
+      : resolve(name, rest.action ? 'action' : solid ? 'solid' : undefined),
+  )
   return Draw ? <Draw {...rest} /> : null
 }

package/src/icons.css

@@ -1,5 +1,6 @@
 /* Every @weft-js/warp-icons svg, with or without warp. warp's own base rule says the same; this one lets the set stand alone. */
 /* warp's layer order, first: a layer ranks by when the page first names it, and this file can load before warp.css. */
+@layer warp, app, theme, base, components, utilities;
 @layer warp.tokens, warp.base, warp.signature, warp.layout, warp.components, warp.inputs, warp.inputs-rich, warp.data, warp.app, warp.flows, warp.marketing, warp.canvas, warp.flow;
 @layer warp.components {
   :where(svg[data-icon]) { inline-size: var(--warp-icon-md, 1em); block-size: var(--warp-icon-md, 1em); flex: none; fill: none; stroke: currentColor; stroke-width: var(--warp-icon-stroke, 1.5); stroke-linecap: round; stroke-linejoin: round; }
@@ -7,23 +8,35 @@
   :where(svg[data-icon] [data-qs]) { stroke-width: 1; }
   :where(svg[data-icon] [data-bs]) { stroke-width: 2; }
   :where(svg[data-icon] [data-bw]) { stroke-width: 2.5; }
+  /* hollow's inside mark: lighter than the body round it */
+  :where(svg[data-icon] [data-bi]) { stroke-width: 1.5; }
   /* the weft, the stroke that says what the icon means: colour it with --warp-icon-weft-color */
   :where(svg[data-icon] [data-w]) { stroke: var(--warp-icon-weft-color, currentColor); }
   /* pixels: a 16 grid in the 24 box. In forced colours currentColor is the system's, so these follow it. */
   :where(svg[data-icon] [data-p], svg[data-icon] [data-c]) { stroke: none; transform: scale(1.5); shape-rendering: crispEdges; }
   :where(svg[data-icon] [data-p]) { fill: currentColor; }
   :where(svg[data-icon] [data-p][data-w]) { fill: var(--warp-icon-weft-color, currentColor); }
-  /* An icon picks its form from its own size (10 §6). Dither is depth, and at 16 px it reads as noise, so it needs 20. */
-  :where(svg[data-icon]) { container-type: size; }
+  /* An icon picks its form from its own size (10 §6). Dither is depth, and at 16 px it reads as noise, so it needs 20.
+     Only an icon that has dither measures itself: a size container is a layout of its own, and a list of 200 rows with
+     an icon each spent 70 ms (4x CPU) laying them out. */
+  :where(svg[data-icon][data-dither]) { container-type: size; }
+  /* A hollow mark measures itself too: under 20 px its gap widens (forms.mjs), or it would close up and read as solid. */
+  :where(svg[data-icon]:has(> mask)) { container-type: size; }
+  :where(svg[data-icon] [data-m]) { display: none; }
+  @container (max-width: 19.5px) { :where(svg[data-icon] [data-m]) { display: inline; } }
   :where(svg[data-icon] [data-d]) { opacity: 0; }
   @container (min-width: 20px) { :where(svg[data-icon] [data-d]) { opacity: 1; } }
   /* solid: a filled body, its offset shade, and what's cut from it */
   :where(svg[data-icon] [data-s]) { fill: currentColor; stroke: none; }
   :where(svg[data-icon] [data-sh]) { stroke: currentColor; stroke-width: 1.5; }
+  /* an open mark's closed shapes, filled in solid */
+  :where(svg[data-icon] [data-f]) { fill: currentColor; }
+  :where(svg[data-icon] [data-f][data-w]) { fill: var(--warp-icon-weft-color, currentColor); }
   :where(svg[data-icon] [data-so]) { fill: currentColor; fill-opacity: .3; stroke: none; }
   :where(svg[data-icon] [data-k]) { stroke: var(--warp-icon-knock, Canvas); stroke-width: 2.5; }
   :where(svg[data-icon] [data-k][data-qs]) { stroke-width: 1.5; }
   :where(svg[data-icon] [data-hi]) { stroke-width: 1.25; }
   :where(svg[data-icon] [data-c]) { fill: var(--warp-icon-knock, Canvas); }
-  @media (forced-colors: active) { :where(svg[data-icon] [data-so]) { display: none; } }
+  :where(svg[data-icon] [data-sx]) { stroke-opacity: .3; }
+  @media (forced-colors: active) { :where(svg[data-icon] [data-so], svg[data-icon] [data-sx]) { display: none; } }
 }

package/src/late.tsx

@@ -4,7 +4,10 @@ import { state } from '@weft-js/core'
 import type { IconComponent, IconProps } from './svg'
 import { icon, Svg } from './svg'
 
-type Lookup = (name: string, variant?: string) => IconComponent | undefined | Promise<IconComponent | undefined>
+type Lookup = (
+  name: string,
+  variant?: string,
+) => IconComponent | undefined | Promise<IconComponent | undefined>
 const held = new Map<string, IconComponent>()
 
 function deferred(key: string, find: () => Promise<IconComponent | undefined>): IconComponent {
@@ -12,9 +15,33 @@ function deferred(key: string, find: () => Promise<IconComponent | undefined>):
   if (made) return made
   let got: Promise<IconComponent | undefined> | undefined
   made = (props: IconProps) => {
-    const ready = state<IconComponent | null>(null), failed = state(false)
-    if (typeof window !== 'undefined') (got ??= find()).then(i => { if (i) ready.value = i; else failed.value = true }, () => { got = undefined; failed.value = true })
-    return <>{ready.value ? ready.value(props) : <Svg {...props} data-loading={failed.value ? undefined : ''} data-failed={failed.value ? '' : undefined} html="" />}</>
+    const ready = state<IconComponent | null>(null),
+      failed = state(false)
+    if (typeof window !== 'undefined')
+      (got ??= find()).then(
+        (i) => {
+          if (i) ready.value = i
+          else failed.value = true
+        },
+        () => {
+          got = undefined
+          failed.value = true
+        },
+      )
+    return (
+      <>
+        {ready.value ? (
+          ready.value(props)
+        ) : (
+          <Svg
+            {...props}
+            data-loading={failed.value ? undefined : ''}
+            data-failed={failed.value ? '' : undefined}
+            html=""
+          />
+        )}
+      </>
+    )
   }
   held.set(key, made)
   return made
@@ -22,15 +49,22 @@ function deferred(key: string, find: () => Promise<IconComponent | undefined>):
 
 let loaded: Promise<Lookup> | undefined
 /** From the pack, a chunk of its own: the first use on a page fetches it. */
-export const late = (name: string, variant: string | undefined, pack: () => Promise<Lookup>) => deferred(`${name}:${variant ?? ''}`, async () => (await (loaded ??= pack()))(name, variant))
+export const late = (name: string, variant: string | undefined, pack: () => Promise<Lookup>) =>
+  deferred(`${name}:${variant ?? ''}`, async () => (await (loaded ??= pack()))(name, variant))
 
 // Only paths go in, with their d and data attributes: what a remote host sends is data, never markup that can run.
-const clean = (svg: string) => (svg.match(/<path(?:\s+data-[a-z]+(?:="[^"<>]*")?|\s+d="[^"<>]*"|\s+transform="translate\([\d. ]+\)")*\s*\/>/g) ?? []).join('')
+const clean = (svg: string) =>
+  (
+    svg.match(
+      /<path(?:\s+data-[a-z]+(?:="[^"<>]*")?|\s+d="[^"<>]*"|\s+transform="translate\([\d. ]+\)")*\s*\/>/g,
+    ) ?? []
+  ).join('')
 
 /** From a host of static files (`weft icons publish`): one small fetch per icon. */
-export const remote = (source: string) => (name: string, variant?: string) => deferred(`${name}:${variant ?? ''}`, async () => {
-  const response = await fetch(`${source}${name}${variant ? `.${variant}` : ''}.svg`)
-  if (!response.ok) return undefined
-  const html = clean(await response.text())
-  return html ? icon(html) : undefined
-})
+export const remote = (source: string) => (name: string, variant?: string) =>
+  deferred(`${name}:${variant ?? ''}`, async () => {
+    const response = await fetch(`${source}${name}${variant ? `.${variant}` : ''}.svg`)
+    if (!response.ok) return undefined
+    const html = clean(await response.text())
+    return html ? icon(html) : undefined
+  })

package/src/lookup.tsx

@@ -6,4 +6,5 @@ const table = all as unknown as Record<string, IconComponent>
 const title = (name: string) => name.replace(/(^|-)(.)/g, (_, __, c) => c.toUpperCase())
 
 /** The icon of a kebab-case name, in `solid` or `action` if asked: undefined for a name nobody drew. */
-export const lookup = (name: string, variant?: string): IconComponent | undefined => table[`${title(name)}Icon${variant ? variant[0]!.toUpperCase() + variant.slice(1) : ''}`]
+export const lookup = (name: string, variant?: string): IconComponent | undefined =>
+  table[`${title(name)}Icon${variant ? variant[0]!.toUpperCase() + variant.slice(1) : ''}`]

package/src/set.tsx

@@ -5,7 +5,10 @@ import type { IconComponent, IconProps } from './svg'
 
 /** An `<Icon>` over these icons only: names stay typed, and whatever isn't listed tree-shakes away. */
 export function iconSet<const S extends Record<string, IconComponent>>(icons: S) {
-  return function Icon({ name, ...rest }: { name: (keyof S & string) | IconComponent } & IconProps) {
+  return function Icon({
+    name,
+    ...rest
+  }: { name: (keyof S & string) | IconComponent } & IconProps) {
     const icon = untrack(() => name)
     const Draw: IconComponent = typeof icon === 'function' ? icon : icons[icon]!
     return <Draw {...rest} />

package/src/svg.tsx

@@ -7,7 +7,7 @@ import './icons.css'
 export type IconProps = {
   /** An accessible name: the icon becomes role="img". Without one it is aria-hidden. */
   label?: string | undefined
-  /** Width and height, in px or any CSS length. warp's own sizes apply otherwise. */
+  /** Width and height, in px or any CSS length. Warp's own sizes apply otherwise. */
   size?: number | string | undefined
   /** Show this tier whatever the page's expression is. */
   tier?: 'quiet' | 'balanced' | 'vivid' | undefined
@@ -21,11 +21,30 @@ export type IconComponent = (props: IconProps) => JSX.Element
 const length = (size: number | string) => (typeof size === 'number' ? `${size}px` : size)
 
 export function Svg({ label, size, tier, html, style, ...rest }: IconProps & { html: string }) {
-  // oxlint-disable-next-line weft/no-html-sink -- `html` is this package's generated art: `icon` and `acting` set it after the props spread, so no caller reaches it
-  return <svg data-icon data-expression={tier} viewBox="0 0 24 24" role={label ? 'img' : undefined} aria-label={label} aria-hidden={label ? undefined : 'true'} focusable="false" style={size === undefined ? style : `width:${length(size)};height:${length(size)}${style ? `;${style}` : ''}`} innerHTML={html} {...rest} />
+  // oxlint-disable weft/no-html-sink -- `html` is this package's generated art: `icon` and `acting` set it after the props spread, so no caller reaches it
+  return (
+    <svg
+      data-icon
+      data-expression={tier}
+      viewBox="0 0 24 24"
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : 'true'}
+      focusable="false"
+      style={
+        size === undefined
+          ? style
+          : `width:${length(size)};height:${length(size)}${style ? `;${style}` : ''}`
+      }
+      innerHTML={html} /* oxlint-enable weft/no-html-sink */
+      {...rest}
+    />
+  )
 }
 
 /*#__NO_SIDE_EFFECTS__*/
 export function icon(line: string, pixels = ''): IconComponent {
-  return p => <Svg {...p} html={line + pixels} />
+  // Dither shows from 20 px, which the icon learns by measuring itself (icons.css): only one that has it asks.
+  const dither = /\sdata-d=/.test(pixels) || /\sdata-d=/.test(line) || undefined
+  return (p) => <Svg data-dither={dither} {...p} html={line + pixels} />
 }

package/src/tiers.css

@@ -1,6 +1,7 @@
 /* The runtime tier switch. warp's expression stops set these four properties, so the nearest data-expression wins with
    no script and no reflow; a page without warp shows balanced. */
 /* warp's layer order, first: a layer ranks by when the page first names it, and this file can load before warp.css. */
+@layer warp, app, theme, base, components, utilities;
 @layer warp.tokens, warp.base, warp.signature, warp.layout, warp.components, warp.inputs, warp.inputs-rich, warp.data, warp.app, warp.flows, warp.marketing, warp.canvas, warp.flow;
 @layer warp.components {
   :where(svg[data-icon] [data-t="o"]) { display: var(--warp-icon-o, inline); }