Expo SDK 58, web basics and Toast, render on every web part

CLAUDE.md

@@ -444,6 +444,11 @@ day of guessing at it:
 | Expo Go 57.0.5 | 0.86.0 | 0.10.0 | 4.5.0 | 2.32.0 |
 | Expo Go 57.0.6 | 0.86.2 | 0.10.1 | 4.5.1 | 2.32.0 |
 | Expo Go 57.0.9 | 0.86.2 | 0.10.1 | 4.5.1 | 2.32.0 |
+| Expo Go 58.0.7 | 0.88.0 | not in the strings | not in the strings | 3.3.0 |
+
+For 58.0.7 the worklets and reanimated versions are not in the binary's strings; they were pinned
+to the SDK's own (0.13.0, 4.7.1) and confirmed by running the example, which aborts at start-up on
+a mismatch. The same client is what the App Store serves for SDK 58 (2026-11-02).
 
 Measured, not read off a manifest — and the measurement is the point, because
 **`api.expo.dev/v2/versions/latest` reports `facebookReactNativeVersion: 0.86.3` for SDK 57 and

apps/docs/components/showcase/themer.tsx

@@ -122,8 +122,6 @@ export function Themer({ children }: { children: ReactNode }): React.ReactElemen
         <button
           type="button"
           onClick={() => setTheme(mode === 'dark' ? 'light' : 'dark')}
-          aria-pressed={mode === 'dark'}
-          aria-label={`Switch the site to ${mode === 'dark' ? 'light' : 'dark'} mode`}
           className="flex cursor-pointer items-center gap-2 rounded-full border bg-card px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
         >
           {mode === 'dark' ? (
@@ -132,6 +130,8 @@ export function Themer({ children }: { children: ReactNode }): React.ReactElemen
             <SunIcon className="size-4" aria-hidden="true" />
           )}
           {mode === 'dark' ? 'Dark' : 'Light'}
+          {/* The name starts with the word on the button, so a voice command for "Dark" finds it. */}
+          <span className="sr-only">, switch the site to {mode === 'dark' ? 'light' : 'dark'} mode</span>
         </button>
       </div>
 

apps/docs/components/web-demos/badge/icons.tsx

@@ -0,0 +1,21 @@
+import { Badge } from 'panelui-web/badge';
+import { LeafIcon, LockIcon, SparklesIcon } from 'lucide-react';
+
+export default function BadgeIcons() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-2">
+      <Badge variant="outline">
+        <LockIcon />
+        Private
+      </Badge>
+      <Badge variant="success">
+        <LeafIcon />
+        Low carbon
+      </Badge>
+      <Badge>
+        <SparklesIcon />
+        Pro
+      </Badge>
+    </div>
+  );
+}

apps/docs/components/web-demos/badge/overview.tsx

@@ -0,0 +1,23 @@
+import { Badge } from 'panelui-web/badge';
+
+export default function BadgeOverview() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-2">
+      <Badge>New</Badge>
+      <Badge variant="secondary">Draft</Badge>
+      <Badge variant="outline">v2.4</Badge>
+      <Badge variant="success" dot>
+        Paid
+      </Badge>
+      <Badge variant="info" dot="pulse">
+        Syncing
+      </Badge>
+      <Badge variant="warning" dot>
+        Due Friday
+      </Badge>
+      <Badge variant="destructive" dot>
+        Overdue
+      </Badge>
+    </div>
+  );
+}

apps/docs/components/web-demos/badge/sizes.tsx

@@ -0,0 +1,17 @@
+import { Badge } from 'panelui-web/badge';
+
+export default function BadgeSizes() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3">
+      <Badge size="sm" variant="secondary">
+        Small
+      </Badge>
+      <Badge size="md" variant="secondary">
+        Medium
+      </Badge>
+      <Badge size="lg" variant="secondary">
+        Large
+      </Badge>
+    </div>
+  );
+}

apps/docs/components/web-demos/badge/statuses.tsx

@@ -0,0 +1,23 @@
+import { Badge } from 'panelui-web/badge';
+
+const RUNS = [
+  { name: 'Nightly backup', status: 'Running', variant: 'info' as const, live: true },
+  { name: 'Image resize queue', status: 'Healthy', variant: 'success' as const, live: false },
+  { name: 'Invoice export', status: 'Retrying', variant: 'warning' as const, live: true },
+  { name: 'Search reindex', status: 'Stopped', variant: 'destructive' as const, live: false },
+];
+
+export default function BadgeStatuses() {
+  return (
+    <ul className="flex w-full max-w-sm flex-col divide-y text-sm">
+      {RUNS.map((run) => (
+        <li key={run.name} className="flex items-center justify-between gap-4 py-2.5">
+          <span>{run.name}</span>
+          <Badge variant={run.variant} dot={run.live ? 'pulse' : true}>
+            {run.status}
+          </Badge>
+        </li>
+      ))}
+    </ul>
+  );
+}

apps/docs/components/web-demos/badge/thumb.tsx

@@ -0,0 +1,14 @@
+import { Badge } from 'panelui-web/badge';
+
+export default function BadgeThumb() {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <Badge variant="success" dot size="lg">
+        Paid
+      </Badge>
+      <Badge variant="info" dot="pulse" size="lg">
+        Syncing
+      </Badge>
+    </div>
+  );
+}

apps/docs/components/web-demos/card/footer.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from 'panelui-web/button';
+import { Input } from 'panelui-web/input';
 import { Card } from 'panelui-web/card';
 
 export default function CardFooterVariants() {

apps/docs/components/web-demos/card/form.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@/components/ui/button';
-import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
+import { Button } from 'panelui-web/button';
+import { Field } from 'panelui-web/field';
+import { Input } from 'panelui-web/input';
 import { Card } from 'panelui-web/card';
 
 export default function CardForm() {
@@ -18,13 +18,13 @@ export default function CardForm() {
       <Card.Content>
         <form id="create-workspace" className="flex flex-col gap-5">
           <Field>
-            <FieldLabel>Work email</FieldLabel>
+            <Field.Label>Work email</Field.Label>
             <Input type="email" placeholder="you@company.com" required />
           </Field>
           <Field>
-            <FieldLabel>Workspace name</FieldLabel>
+            <Field.Label>Workspace name</Field.Label>
             <Input placeholder="Northwind Studio" required />
-            <FieldDescription>You can change it at any time.</FieldDescription>
+            <Field.Description>You can change it at any time.</Field.Description>
           </Field>
         </form>
       </Card.Content>

apps/docs/components/web-demos/card/image.tsx

@@ -1,5 +1,5 @@
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { Badge } from 'panelui-web/badge';
+import { Button } from 'panelui-web/button';
 import { Card } from 'panelui-web/card';
 
 export default function CardImage() {

apps/docs/components/web-demos/card/list.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge';
+import { Badge } from 'panelui-web/badge';
 import { Card } from 'panelui-web/card';
 
 const PROJECTS = [

apps/docs/components/web-demos/card/sizes.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge';
+import { Badge } from 'panelui-web/badge';
 import { Card } from 'panelui-web/card';
 
 function Report({ size }: { size: 'default' | 'sm' }) {

apps/docs/components/web-demos/checkbox/colors.tsx

@@ -0,0 +1,23 @@
+import { Checkbox } from 'panelui-web/checkbox';
+import { Label } from 'panelui-web/label';
+
+export default function CheckboxColors() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-4">
+        <Checkbox size="sm" defaultChecked label="Small" />
+        <Checkbox size="md" defaultChecked label="Medium" />
+        <Checkbox size="lg" defaultChecked label="Large" />
+        <Checkbox size="lg" indeterminate label="Some" />
+      </div>
+      <Label>
+        <Checkbox color="success" defaultChecked />
+        <Label.Text>Mark as reviewed</Label.Text>
+      </Label>
+      <Label>
+        <Checkbox color="destructive" />
+        <Label.Text>Delete the old exports too</Label.Text>
+      </Label>
+    </div>
+  );
+}

apps/docs/components/web-demos/checkbox/form.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from 'panelui-web/button';
+import { Checkbox } from 'panelui-web/checkbox';
+import { Field } from 'panelui-web/field';
+import { Label } from 'panelui-web/label';
+
+export default function CheckboxForm() {
+  const [sent, setSent] = useState(false);
+  return (
+    <form
+      className="flex w-full max-w-xs flex-col gap-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSent(true);
+      }}
+    >
+      <Field name="terms">
+        <Field.Label>
+          <Checkbox name="terms" required />
+          <Label.Text>I have read the hire agreement</Label.Text>
+        </Field.Label>
+        <Field.Error match="valueMissing">Tick the box to book the van.</Field.Error>
+      </Field>
+      <Button type="submit">{sent ? 'Booked' : 'Book the van'}</Button>
+    </form>
+  );
+}

apps/docs/components/web-demos/checkbox/overview.tsx

@@ -0,0 +1,22 @@
+import { Checkbox } from 'panelui-web/checkbox';
+import { Label } from 'panelui-web/label';
+
+export default function CheckboxOverview() {
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-3">
+      <Label>
+        <Checkbox defaultChecked />
+        <Label.Text>Keep me signed in</Label.Text>
+      </Label>
+      <Label>
+        <Checkbox />
+        <Label.Text>Send me the monthly digest</Label.Text>
+      </Label>
+      <Label>
+        <Checkbox disabled />
+        <Label.Text>Share usage data</Label.Text>
+        <Label.Hint>Admins only</Label.Hint>
+      </Label>
+    </div>
+  );
+}

apps/docs/components/web-demos/checkbox/parent.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import { Checkbox } from 'panelui-web/checkbox';
+import { Label } from 'panelui-web/label';
+
+const ROOMS = [
+  { value: 'kitchen', label: 'Kitchen lights' },
+  { value: 'hall', label: 'Hallway lights' },
+  { value: 'porch', label: 'Porch light' },
+];
+
+export default function CheckboxParent() {
+  const [on, setOn] = useState(['hall']);
+  return (
+    <Checkbox.Group
+      value={on}
+      onValueChange={setOn}
+      allValues={ROOMS.map((room) => room.value)}
+      aria-labelledby="rooms-heading"
+      className="w-full max-w-xs"
+    >
+      <Label id="rooms-heading">
+        <Checkbox parent />
+        <Label.Text>Turn off at midnight</Label.Text>
+        <Label.Hint>
+          {on.length} of {ROOMS.length}
+        </Label.Hint>
+      </Label>
+      <div className="flex flex-col gap-3 ps-6">
+        {ROOMS.map((room) => (
+          <Label key={room.value}>
+            <Checkbox value={room.value} />
+            <Label.Text>{room.label}</Label.Text>
+          </Label>
+        ))}
+      </div>
+    </Checkbox.Group>
+  );
+}

apps/docs/components/web-demos/checkbox/thumb.tsx

@@ -0,0 +1,11 @@
+import { Checkbox } from 'panelui-web/checkbox';
+
+export default function CheckboxThumb() {
+  return (
+    <div className="flex items-center gap-4">
+      <Checkbox size="lg" label="Off" />
+      <Checkbox size="lg" defaultChecked label="On" />
+      <Checkbox size="lg" indeterminate label="Some" />
+    </div>
+  );
+}

apps/docs/components/web-demos/chip/colors.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Chip } from 'panelui-web/chip';
+
+export default function ChipColors() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-2">
+      <Chip defaultPressed>Primary</Chip>
+      <Chip defaultPressed color="success">
+        In stock
+      </Chip>
+      <Chip defaultPressed color="info">
+        Ships today
+      </Chip>
+      <Chip defaultPressed color="warning">
+        On sale
+      </Chip>
+      <Chip defaultPressed color="destructive">
+        Discontinued
+      </Chip>
+    </div>
+  );
+}

apps/docs/components/web-demos/chip/overview.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { Chip } from 'panelui-web/chip';
+
+export default function ChipOverview() {
+  return (
+    <Chip.Group defaultValue={['vegetarian', 'quick']} aria-label="Filter recipes">
+      <Chip value="vegetarian">Vegetarian</Chip>
+      <Chip value="quick">Under 30 minutes</Chip>
+      <Chip value="one-pot">One pot</Chip>
+      <Chip value="freezer">Freezes well</Chip>
+    </Chip.Group>
+  );
+}

apps/docs/components/web-demos/chip/removable.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useState } from 'react';
+import { Chip } from 'panelui-web/chip';
+import { Input } from 'panelui-web/input';
+
+export default function ChipRemovable() {
+  const [tags, setTags] = useState(['kitchen', 'renovation', 'quotes']);
+  const [draft, setDraft] = useState('');
+
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <Input
+        value={draft}
+        placeholder="Add a tag and press Enter"
+        aria-label="Add a tag"
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          const tag = draft.trim().toLowerCase();
+          if (event.key === 'Enter' && tag && !tags.includes(tag)) {
+            setTags([...tags, tag]);
+            setDraft('');
+          }
+        }}
+      />
+      <div className="flex min-h-7 flex-wrap gap-2">
+        {tags.map((tag) => (
+          <Chip key={tag} onRemove={() => setTags(tags.filter((t) => t !== tag))}>
+            {tag}
+          </Chip>
+        ))}
+      </div>
+    </div>
+  );
+}