Changelog

October 2026Copy Anchor Link

One top barCopy Anchor Link

The site has one navigation now: a top bar that never moves, with Docs, Components, Screens and Themes, search, Get started, the theme switch and GitHub. Docs and Components add a sidebar under it; Home, Screens and the theme studio stay full width. Install moved into Docs, which now opens with Get started (How it works, Install, Mobile kit, Web kit). On a phone, the menu holds the sections, then the section's pages.

ThemesCopy Anchor Link

Pick a theme on this site and watch both kits change, live, then commit it with one code. See Themes.

• The theme bar sits at the bottom of every page: a preset, a brand colour, light or dark, how many colours were adjusted for contrast, and Use theme. The whole site and every live phone and browser frame follow it.
• The theme studio has every control next to a live phone and browser: eight personality presets, any brand colour, a neutral, heading and body fonts from 14 Google families, radius, pill or matching buttons, border weight, depth (flat, soft, raised, hard), icon stroke and density. Undo, and a shuffle that keeps what you lock.
• Contrast fixes itself. A colour that fails WCAG AA keeps its hue and moves the least lightness it needs; the bar lists each change. The contrast gate also checks brand and status colours on muted surfaces now, which brightened the dark theme's blue a little.
• Use a theme with a pk1- code: npm run theme:apply -- <code> in the repo, npx kit-tokens theme apply <code> in a copied-out kit, a prompt for your coding agent (both kits have an apply-theme skill), a share link, or a tokens.json download. Each kit's Foundations page shows the applied theme.
• In the mobile kit, buttons and chips use rounded-control (pills, or the radius) and controls h-control; in both kits shadows are the theme's three levels. Web buttons keep following the radius.

Mobile kit: Timeline and RatingCopy Anchor Link

• Timeline. Vertical status steps joined by a line, each done, current or upcoming, with a time and a note. The shop's order screen uses it instead of a hand-built list.
• Rating. Stars as a display (half stars, the number, a review count) or as an input whose stars are 44pt radio buttons. The shop shows product ratings with it, and asks "How was your order?" once an order is delivered.
• The backlog's list of missing components is up to date again (89 components now).

The mobile kit passes the accessibility gateCopy Anchor Link

The gate now checks the mobile kit inside the phone frames too. React Native for Web renders the aria-* props and ignores accessibilityState and accessibilityValue, so on the web export several controls had no name or state. Fixed in the kit's components, so every prototype gets them:

• Named progress. Spinner is announced as "Loading" and ProgressRing takes accessibilityLabel (default "Progress"), with its value on web.
• Sliders require accessibilityLabel and report their value on web.
• Radios and switches are named by their Label: a Label htmlFor="x" gets the id x-label, and a RadioGroupItem or Switch with id="x" points at it with aria-labelledby.
• Selection state on web: SelectableCard and selectable ListRows set aria-checked, tabs aria-selected.
• Inputs: placeholders measured 2.5:1 on web (a CSS reset coloured the empty field gray-400); they are muted-foreground now, and a read-only Input or Textarea is announced as disabled.
• Select no longer carries an aria-autocomplete its button role does not allow.

Web kit components and checksCopy Anchor Link

• Six web components. DatePicker, Calendar, Pagination, NavigationMenu, Drawer and ChatThreadList. The assistant sample now keeps a history of conversations: a sidebar on desktop, a sheet on phones.
• Attachments. ChatComposer takes files when given an accept: a paperclip, drag and drop, and chips to review and remove them before sending. Sent files show as AttachmentChips, and the assistant sample accepts invoices and receipts.
• Sources and follow-ups. Answers can cite what they're based on: [1] in the text becomes a small citation, and a numbered source list sits under the answer, each opening a preview. FollowUpSuggestions puts two to four next questions under the latest answer. The assistant sample uses both.
• ToolCallCard stopped. A tool call the person cancelled reads "Stopped", not a red "Failed".
• Accessibility gate. Every pull request now runs axe-core (WCAG 2.1 AA) over this site and the web kit, in light and dark. Its first run found and fixed:
  • Status badges in a colour on their own tint (under 4.5:1). They are now an outline badge with a coloured dot.
  • The destructive alert's text at 90% opacity.
  • A slider handle with no name.
  • Filter tabs pointing at panels that don't exist.
  • Brand-blue active links in this site's navigation.
  • An unlabelled GitHub icon.
• Text on tints. The token build works out, per status colour, the strongest tint its own text can sit on and still clear AA: with today's palette, primary, success and warning up to 5%, info up to 15%, destructive never. Both kits' DESIGN.md list the limits, and kit-tokens check fails on a class string that goes past them, naming the file and line.
• Calendar hydration fix. shadcn's Calendar wrote locale-formatted dates into its markup, so server and browser disagreed. The kit's copy uses YYYY-MM-DD.

The live siteCopy Anchor Link

• Live at protokit-docs.empty-math-d572.workers.dev, deployed by Cloudflare on every push to main. Pull requests get their own preview URL, and a PR that breaks the site's build cannot merge.
• install.md, llms.txt and the install guide use full links to this site.
• The repository is public.

Web kitCopy Anchor Link

• Web kit. Next.js, Tailwind 4 and shadcn/ui on the same tokens as the mobile kit: app shells, data tables, stat tiles, heroes, pricing, and AI chat with streaming, tool calls and approvals. It has the same registry, skills and contrast gate as the mobile kit.
• Sample apps. One made-up product, Northwind, built three ways: a dashboard, a landing page and an AI assistant. npm run eject-samples removes them; CI checks that it still does, for both kits.
• This site covers both kits. Component pages live at /components/mobile/… and /components/web/…, web components run live in a browser frame, and search, llms.txt and install.md include both.
• One brand. npm run tokens:sync copies the mobile kit's tokens.json to the web kit; CI fails if they differ.

FoundationsCopy Anchor Link

• Monorepo. The kit moved to apps/mobile in the protokit repository, next to this site. Each app still works on its own when copied out.
• @itshendri/kit-tokens. The token build is a package: one tokens.json to NativeWind, Tailwind 4 / shadcn, TypeScript, Figma and DESIGN.md, with the WCAG AA gate. Not on npm yet.
• Registry as data. One list of components generates DESIGN_SYSTEM.md, llms.txt, a shadcn registry and the component pages here.
• Embed mode. The kits' web builds run inside a page (these phone and browser frames) and follow the page's theme.
• MIT licensed.