@swiftbrowser/web 0.2.0 → 0.3.0

package/src/styles.ts

@@ -15,6 +15,7 @@
 
 import { assetColorVar } from './assets';
 import {
+  isAngularGradientStyle,
   isAssetColor,
   isColor,
   isColorGradientStyle,
@@ -169,6 +170,10 @@ export function styleToCSS(style: ShapeStyle, role: PaintRole): PaintCSS {
     const { stops, center, startRadius, endRadius } = style.radialGradient;
     return gradient(radialGradientCSS(stops ?? [], center, startRadius, endRadius, opacity), stops, opacity);
   }
+  if (isAngularGradientStyle(style)) {
+    const { stops, center, startAngle, endAngle } = style.angularGradient;
+    return gradient(angularGradientCSS(stops ?? [], center, startAngle, endAngle, opacity), stops, opacity);
+  }
   if (isColorGradientStyle(style)) {
     const base = colorToCSS(style.colorGradient);
     const light = withOpacity(`color-mix(in srgb, ${base}, white 12%)`, opacity);
@@ -243,6 +248,27 @@ export function radialGradientCSS(
   return `radial-gradient(circle ${size} at ${round(cx * 100)}% ${round(cy * 100)}%, ${list})`;
 }
 
+/**
+ * `conic-gradient(from <angle> at <cx>% <cy>%, ...)`. SwiftUI measures angles
+ * clockwise from 3 o'clock and CSS from 12 o'clock, so the CSS start is the
+ * start angle plus 90°; the stops span start...end as a share of the turn.
+ */
+export function angularGradientCSS(
+  stops: readonly GradientStop[],
+  center: UnitPoint | undefined,
+  startAngle: number | undefined,
+  endAngle: number | undefined,
+  opacity?: number,
+): string {
+  const cx = unit(center?.x, 0.5);
+  const cy = unit(center?.y, 0.5);
+  const start = unit(startAngle, 0);
+  const end = unit(endAngle, start + 360);
+  const span = end === start ? 360 : end - start;
+  const list = stopsCSS(stops, (location) => (location * span) / 360, opacity);
+  return `conic-gradient(from ${round(start + 90)}deg at ${round(cx * 100)}% ${round(cy * 100)}%, ${list})`;
+}
+
 /**
  * `color pct%, ...`, with `map` turning a stop location into a 0...1 position
  * and `opacity` multiplying every stop. Degenerate lists are padded to two stops.
@@ -386,6 +412,10 @@ export function maskImageCSS(style: ShapeStyle): string {
     const { stops, center, startRadius, endRadius } = style.radialGradient;
     return radialGradientCSS(stops ?? [], center, startRadius, endRadius, style.opacity);
   }
+  if (isAngularGradientStyle(style)) {
+    const { stops, center, startAngle, endAngle } = style.angularGradient;
+    return angularGradientCSS(stops ?? [], center, startAngle, endAngle, style.opacity);
+  }
   if (isColorGradientStyle(style)) return styleToCSS(style, 'paint').value;
   const alpha = isColor(style) ? colorAlpha(style) : clamp01(style.opacity ?? 1);
   const solid = `rgba(0, 0, 0, ${round(alpha)})`;

package/src/symbols.ts

@@ -58,6 +58,7 @@ import {
   Bitcoin,
   Bluetooth,
   Bold,
+  CaseSensitive,
   Book,
   Bookmark,
   BookOpen,
@@ -310,6 +311,7 @@ import {
   Send,
   Server,
   Settings,
+  Shapes,
   Share,
   Share2,
   Shield,
@@ -426,6 +428,41 @@ export interface SymbolGlyph {
   fill: GlyphFill;
 }
 
+/**
+ * The activity indicator (an indeterminate `ProgressView`), as iOS draws it:
+ * eight rounded spokes filling the glyph, the leading one (at the top) at full
+ * strength and the three behind it fading out to the rest's 0.31. styles.css
+ * steps that ramp around the spokes clockwise (the glyph itself stays still),
+ * so the fade trails the leading spoke.
+ */
+const ACTIVITY_INDICATOR: IconNode = [
+  ['line', { x1: '12', y1: '6.21', x2: '12', y2: '1.52', 'stroke-width': '3.05', 'stroke-opacity': '1' }],
+  ['line', { x1: '16.09', y1: '7.91', x2: '19.41', y2: '4.59', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '17.79', y1: '12', x2: '22.48', y2: '12', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '16.09', y1: '16.09', x2: '19.41', y2: '19.41', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '12', y1: '17.79', x2: '12', y2: '22.48', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '7.91', y1: '16.09', x2: '4.59', y2: '19.41', 'stroke-width': '3.05', 'stroke-opacity': '0.49' }],
+  ['line', { x1: '6.21', y1: '12', x2: '1.52', y2: '12', 'stroke-width': '3.05', 'stroke-opacity': '0.66' }],
+  ['line', { x1: '7.91', y1: '7.91', x2: '4.59', y2: '4.59', 'stroke-width': '3.05', 'stroke-opacity': '0.83' }],
+];
+
+/** `books.vertical.fill`: three upright books and a leaning one, as solid shapes. */
+const BOOKS_VERTICAL_FILL: IconNode = [
+  ['rect', { x: '1.5', y: '3', width: '5', height: '18', rx: '1.2', stroke: 'none' }],
+  ['rect', { x: '7.5', y: '3', width: '5', height: '18', rx: '1.2', stroke: 'none' }],
+  ['rect', { x: '13.5', y: '5', width: '4', height: '16', rx: '1.2', stroke: 'none' }],
+  ['rect', { x: '17.8', y: '4.5', width: '4', height: '16', rx: '1.2', stroke: 'none', transform: 'rotate(-14 19.8 12.5)' }],
+];
+
+/** Color used for inner marks of `knockout` glyphs; styles.css sets the variable. */
+const KNOCKOUT_COLOR = 'var(--sb-icon-knockout, var(--sb-color-system-background, #fff))';
+
+/** `square.on.circle.fill`: a solid square over a solid circle, a gap between them. */
+const SQUARE_ON_CIRCLE_FILL: IconNode = [
+  ['circle', { cx: '9.5', cy: '9.5', r: '7.5' }],
+  ['rect', { x: '9', y: '9', width: '13', height: '13', rx: '3', stroke: KNOCKOUT_COLOR, 'stroke-width': '2.4' }],
+];
+
 const outline = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'outline' });
 const knockout = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'knockout' });
 const solid = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'solid' });
@@ -532,7 +569,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'flag.fill': solid(Flag),
   tag: outline(Tag),
   'tag.fill': solid(Tag),
-  textformat: outline(Type),
+  textformat: outline(CaseSensitive),
   'line.3.horizontal': outline(Menu),
   'line.3.horizontal.decrease': outline(Funnel),
   'line.3.horizontal.decrease.circle': outline(Funnel),
@@ -548,7 +585,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
 
   // People and places
   person: outline(User),
-  'person.fill': outline(User),
+  'person.fill': solid(User),
   'person.2': outline(Users),
   'person.circle': outline(CircleUser),
   'person.circle.fill': knockout(CircleUser),
@@ -608,7 +645,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   camera: outline(Camera),
   'camera.fill': outline(Camera),
   photo: outline(Image),
-  'photo.fill': outline(Image),
+  'photo.fill': knockout(Image),
   'photo.on.rectangle': outline(Image),
   play: outline(Play),
   'play.fill': solid(Play),
@@ -668,7 +705,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'doc.text.fill': outline(FileText),
   archivebox: outline(Archive),
   'shippingbox': outline(Package),
-  'shippingbox.fill': outline(Package),
+  'shippingbox.fill': knockout(Package),
 
   // Settings and security
   gear: outline(Settings),
@@ -704,7 +741,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   crown: outline(Crown),
   'crown.fill': solid(Crown),
   trophy: outline(Trophy),
-  'trophy.fill': outline(Trophy),
+  'trophy.fill': solid(Trophy),
 
   // Nature and weather
   'sun.max': outline(Sun),
@@ -727,6 +764,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'circle.grid.3x3': outline(Grid3x3),
   'fork.knife': outline(Utensils),
   'text.bubble': outline(MessageSquareText),
+  'text.bubble.fill': knockout(MessageSquareText),
   'plus.bubble': outline(MessageSquarePlus),
   'box.truck': outline(Truck),
   'list.bullet.below.rectangle': outline(LayoutList),
@@ -758,6 +796,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
 
   // Activity
   'rays': outline(LoaderCircle),
+  // An indeterminate ProgressView's spinner (eight spokes; styles.css animates their fade).
+  'progress.indicator': outline(ACTIVITY_INDICATOR),
   'circle.dotted': outline(LoaderCircle),
 
   // More common symbols: people, documents, arrows, text, shapes, money,
@@ -790,7 +830,6 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'calendar.badge.plus': outline(CalendarPlus),
   'calendar.badge.clock': outline(CalendarClock),
   'calendar.badge.exclamationmark': outline(CalendarX),
-  'calendar.circle': outline(Calendar),
   'clock.arrow.circlepath': outline(History),
   'clock.badge.checkmark': outline(ClockCheck),
   'arrow.uturn.backward': outline(Undo2),
@@ -821,6 +860,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'arrowshape.up': outline(ArrowBigUp),
   'arrowshape.down': outline(ArrowBigDown),
   'square.on.square': outline(Copy),
+  'square.on.circle': outline(Shapes),
+  'square.on.circle.fill': solid(SQUARE_ON_CIRCLE_FILL),
   'plus.square': outline(SquarePlus),
   'plus.square.fill': knockout(SquarePlus),
   'minus.square': outline(SquareMinus),
@@ -949,6 +990,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   tortoise: outline(Turtle),
   fish: outline(Fish),
   bird: outline(Bird),
+  // The Swift logo: a bird in flight.
+  swift: outline(Bird),
   cat: outline(Cat),
   dog: outline(Dog),
   carrot: outline(Carrot),
@@ -1003,6 +1046,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   dice: outline(Dices),
   newspaper: outline(Newspaper),
   'books.vertical': outline(Library),
+  'books.vertical.fill': solid(BOOKS_VERTICAL_FILL),
   'note.text': outline(StickyNote),
   note: outline(StickyNote),
   'location.circle': outline(LocateFixed),
@@ -1068,6 +1112,21 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
   parts = parts.filter((part) => part !== 'fill');
   const badge = parts.indexOf('badge');
   if (badge > 0) parts = parts.slice(0, badge);
+  // `trash.circle`, `arrow.down.circle.fill`, `heart.square.fill`: the base
+  // glyph inside the enclosure (drawn whole, or filled with the glyph
+  // knocked out), unless the table lists the full name's base form.
+  const enclosure = parts.at(-1);
+  if ((enclosure === 'circle' || enclosure === 'square') && parts.length > 1) {
+    const listed = SF_SYMBOLS[parts.join('.')];
+    if (listed) {
+      // The listed outline form, its enclosure filled (`arrow.down.circle.fill`).
+      if (fill && enclosingShapeIndex(listed.icon) >= 0) return { icon: listed.icon, fill: 'knockout' };
+    } else {
+      const base = parts.slice(0, -1).join('.');
+      const glyph = GENERIC_SHAPES.has(base) ? undefined : lookupSymbol(base);
+      if (glyph) return enclosed(glyph.icon, enclosure, fill);
+    }
+  }
   const bases: string[] = [];
   for (let length = parts.length; length > 0; length--) {
     const base = parts.slice(0, length).join('.');
@@ -1084,6 +1143,31 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
   return undefined;
 }
 
+/**
+ * `icon` at 55% inside a circle or rounded square: outlined (`X.circle`), or
+ * filled with the glyph knocked out of it (`X.circle.fill`), as SF Symbols
+ * draw their enclosed forms.
+ */
+function enclosed(icon: IconNode, enclosure: 'circle' | 'square', fill: boolean): SymbolGlyph {
+  const outer: IconNode[number] =
+    enclosure === 'circle' ? ['circle', { cx: '12', cy: '12', r: '10' }] : ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '4' }];
+  // Scaled about the center; the stroke is widened to keep its weight.
+  const inner = icon.map(([tag, attrs]) => [tag, { ...attrs, transform: 'translate(5.4 5.4) scale(0.55)', 'stroke-width': '3.3' }] as IconNode[number]);
+  return { icon: [outer, ...inner], fill: fill ? 'knockout' : 'outline' };
+}
+
+/**
+ * The name of the filled form of `systemName` when the table can draw one
+ * (`house` → `house.fill`), else the name itself: a tab bar shows its items'
+ * symbols filled, as iOS does (`symbolVariants` `.fill`).
+ */
+export function filledSymbolName(systemName: string): string {
+  if (systemName.split('.').includes('fill')) return systemName;
+  const filled = `${systemName}.fill`;
+  const glyph = lookupSymbol(filled);
+  return glyph && glyph.fill !== 'outline' ? filled : systemName;
+}
+
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
 /**
@@ -1092,15 +1176,18 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
  * with its triangle), else the first shape.
  */
 export function outerShapeIndex(icon: IconNode): number {
-  const index = icon.findIndex(([tag, attrs]) => {
+  const index = enclosingShapeIndex(icon);
+  return index >= 0 ? index : 0;
+}
+
+/** The index of the circle or rectangle enclosing `icon`'s other marks, or -1. */
+function enclosingShapeIndex(icon: IconNode): number {
+  return icon.findIndex(([tag, attrs]) => {
     const n = (key: string): number => Number(attrs[key] ?? 0);
     return (tag === 'circle' && n('r') >= 9) || (tag === 'rect' && n('width') >= 16 && n('height') >= 12);
   });
-  return index >= 0 ? index : 0;
 }
 
-/** Color used for inner marks of `knockout` glyphs; styles.css sets the variable. */
-const KNOCKOUT_COLOR = 'var(--sb-icon-knockout, var(--sb-color-system-background, #fff))';
 
 /**
  * Build the `<svg>` for a symbol. Returns `null` for unknown names; the

package/src/webAuth.ts

@@ -215,7 +215,7 @@ function promptToOpen(url: string, open: (url: string) => PopupLike | null): Pro
     element.dataset['action'] = action;
     element.style.cssText =
       'flex:1;padding:10px 14px;border-radius:10px;border:0;font:inherit;cursor:pointer;' +
-      (primary ? 'background:#007aff;color:#fff;font-weight:600;' : 'background:rgba(120,120,128,0.2);color:inherit;');
+      (primary ? 'background:#0088ff;color:#fff;font-weight:600;' : 'background:rgba(120,120,128,0.2);color:inherit;');
     return element;
   };
   const cancel = button('Cancel', 'cancel', false);