makersclaw 0.2.0 → 0.3.1

package/templates/next/files/components/ui/icon.jsx

@@ -1,7 +1,13 @@
 // The kit's icons: one inline sprite, no icon package to install. Every
-// glyph is a 24-box stroke path; add one here, never an <svg> in a surface.
-// `name` is the key below; unknown names render nothing (and `npm run
-// check` names them).
+// glyph is a 24-box stroke path (1.8 wide, round caps, currentColor); add
+// one here, never an <svg> in a surface. `name` is a key below; unknown
+// names render nothing (and `npm run check` names them).
+//
+// BRANDS holds the brand marks: google, github, apple, microsoft,
+// x-logo (the X / Twitter mark; `x` is the close glyph), linkedin,
+// instagram, youtube, facebook. Unlike PATHS they are FILLED shapes
+// (currentColor, even-odd so letters and holes knock out), one colour,
+// drawn by hand and simplified, never copied from an icon library.
 
 const PATHS = {
   plus: "M12 5v14M5 12h14",
@@ -11,8 +17,11 @@ const PATHS = {
   "chevron-up": "m18 15-6-6-6 6",
   "chevron-left": "m15 18-6-6 6-6",
   "chevron-right": "m9 18 6-6-6-6",
+  "chevrons-up-down": "m7 15 5 5 5-5M7 9l5-5 5 5",
   "arrow-left": "M19 12H5m7-7-7 7 7 7",
   "arrow-right": "M5 12h14m-7-7 7 7-7 7",
+  "arrow-up": "M12 19V5m-7 7 7-7 7 7",
+  "arrow-down": "M12 5v14m7-7-7 7-7-7",
   search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM21 21l-4.3-4.3",
   trash: "M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14",
   pencil: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z",
@@ -36,6 +45,7 @@ const PATHS = {
   download: "M12 3v12m-5-5 5 5 5-5M4 21h16",
   upload: "M12 21V9m-5 5 5-5 5 5M4 3h16",
   eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Zm10-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z",
+  "eye-off": "M10.6 5.1A10 10 0 0 1 12 5c6 0 10 7 10 7a17 17 0 0 1-2.4 3.2M6.6 6.6C3.8 8.4 2 12 2 12s4 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20",
   send: "m22 2-7 20-4-9-9-4 20-7Z",
   home: "m3 11 9-8 9 8v10h-6v-6H9v6H3V11Z",
   settings: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm8 4-1.5-.5.3-1.6 1.4-.9-1-1.7-1.6.5-1.2-1.2.5-1.6-1.7-1-.9 1.4-1.6-.3L12 4l-.5 1.5-1.6.3-.9-1.4-1.7 1 .5 1.6-1.2 1.2-1.6-.5-1 1.7 1.4.9.3 1.6L4 12l1.5.5-.3 1.6-1.4.9 1 1.7 1.6-.5 1.2 1.2-.5 1.6 1.7 1 .9-1.4 1.6.3L12 20l.5-1.5 1.6-.3.9 1.4 1.7-1-.5-1.6 1.2-1.2 1.6.5 1-1.7-1.4-.9-.3-1.6L20 12Z",
@@ -59,21 +69,133 @@ const PATHS = {
   minus: "M5 12h14",
   archive: "M3 4h18v4H3zM5 8v12h14V8M10 12h4",
   inbox: "M3 13h5l2 3h4l2-3h5M3 13V5h18v8M3 13v6h18v-6",
+  pin: "M12 17v5M8 3h8M9 3v7l-3 4v3h12v-3l-3-4V3",
+  bold: "M7 4h6a4 4 0 0 1 0 8H7zM7 12h7a4 4 0 0 1 0 8H7z",
+  italic: "M19 4h-9M14 20H5M15 4 9 20",
+  underline: "M6 4v6a6 6 0 0 0 12 0V4M4 21h16",
+  list: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
+  grid: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
+  "align-left": "M3 6h18M3 12h12M3 18h16",
+  "align-center": "M3 6h18M6 12h12M4 18h16",
+  "align-right": "M3 6h18M9 12h12M5 18h16",
+  paperclip: "m21 11-9 9a6 6 0 0 1-8.5-8.5l8.6-8.6a4 4 0 0 1 5.7 5.7l-8.6 8.5a2 2 0 0 1-2.8-2.8L15 6.9",
+  stop: "M6 6h12v12H6z",
+  menu: "M4 6h16M4 12h16M4 18h16",
+  "panel-left": "M3 4h18v16H3zM9 4v16",
+  "log-out": "M9 21H4V3h5M16 17l5-5-5-5M21 12H9",
+  code: "m16 18 6-6-6-6M8 6l-6 6 6 6",
+  shield: "M12 3 4 6v6c0 5 3.4 8.2 8 9 4.6-.8 8-4 8-9V6l-8-3Z",
+  "shield-check": "M12 3 4 6v6c0 5 3.4 8.2 8 9 4.6-.8 8-4 8-9V6l-8-3ZM9 12l2 2 4-4",
+  "circle-check": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-4 9 3 3 5-5",
+  // The same glyph under its older name, so either one renders.
+  "check-circle": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-4 9 3 3 5-5",
+  "circle-x": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM15 9l-6 6M9 9l6 6",
+  "message-square": "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z",
+  "git-branch": "M6 3v12M18 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM18 9a9 9 0 0 1-9 9",
+  "git-pull-request": "M6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM18 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM6 9v12M12 6h4a2 2 0 0 1 2 2v7m-3-12-3 3 3 3",
+  server: "M3 3h18v8H3zM3 13h18v8H3zM7 7h.01M7 17h.01",
+  leaf: "M5 19C5 10 10 4 20 4c0 10-6 15-15 15ZM3 21 14 10",
+  monitor: "M3 4h18v12H3zM12 16v4M8 20h8",
+  smartphone: "M8 3h8v18H8zM11 17.5h2",
+  video: "M3 6h12v12H3zM15 10l6-3v10l-6-3",
+  tablet: "M5 2h14v20H5zM11 18.5h2",
+  sun: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4",
+  moon: "M20 14.5A8.5 8.5 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z",
+  database: "M4 6a8 3 0 1 0 16 0 8 3 0 1 0-16 0ZM4 6v12a8 3 0 0 0 16 0V6M4 12a8 3 0 0 0 16 0",
+  "git-commit": "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM3 12h6M15 12h6",
+  lightbulb: "M12 3a6 6 0 0 0-3.5 10.9c.6.4.9 1.1.9 1.8V16h5.2v-.3c0-.7.3-1.4.9-1.8A6 6 0 0 0 12 3ZM9.5 19h5M10.5 22h3",
+  "life-buoy": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM5.6 5.6l3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6",
+  "log-in": "M15 3h5v18h-5M10 17l5-5-5-5M15 12H3",
+  "user-plus": "M2 21a7 7 0 0 1 14 0M9 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM19 8v6M16 11h6",
+  palette: "M12 3a9 9 0 0 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.3 0-1.1.9-1.9 2-1.9h2a4 4 0 0 0 4-4C21 6.4 17 3 12 3ZM7.5 11.5h.01M9 7.5h.01M14 6.5h.01M17.5 9.5h.01",
+  layers: "M12 3 2 8l10 5 10-5-10-5ZM2 12l10 5 10-5M2 16l10 5 10-5",
+  type: "M4 7V4h16v3M12 4v16M9 20h6",
+  package: "M12 2 3 7v10l9 5 9-5V7l-9-5ZM3 7l9 5 9-5M12 12v10M7.5 4.5l9 5",
+  // Task states: an empty ring is "to do", a broken ring is "doing".
+  circle: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+  "circle-dashed": "M13.6 3.1A9 9 0 0 1 17.2 4.6M19.4 6.8A9 9 0 0 1 20.9 10.4M20.9 13.6A9 9 0 0 1 19.4 17.2M17.2 19.4A9 9 0 0 1 13.6 20.9M10.4 20.9A9 9 0 0 1 6.8 19.4M4.6 17.2A9 9 0 0 1 3.1 13.6M3.1 10.4A9 9 0 0 1 4.6 6.8M6.8 4.6A9 9 0 0 1 10.4 3.1",
+  loader: "M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8",
+  "trending-up": "m3 17 6-6 4 4 8-8M15 7h6v6",
+  "trending-down": "m3 7 6 6 4-4 8 8M15 17h6v-6",
+  "message-circle": "M21 12a9 9 0 0 1-13.3 7.9L3 21l1.1-4.7A9 9 0 1 1 21 12Z",
+  "credit-card": "M2 5h20v14H2zM2 10h20M6 15h4",
+  "shopping-cart": "M2 3h3l2.4 12h11.2L21 7H5.8M8 19.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM16 19.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0Z",
+  key: "M7.5 11a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM10.7 12.3 21 2M16 7l3 3M18.5 4.5l2 2",
+  quote: "M4 18h5v-6H4v6Zm0-6c0-4 1.5-6 5-7M15 18h5v-6h-5v6Zm0-6c0-4 1.5-6 5-7",
+  truck: "M2 5h12v11H2zM14 9h4.5L21 12v4h-7M4 18a2 2 0 1 0 4 0 2 2 0 1 0-4 0ZM15 18a2 2 0 1 0 4 0 2 2 0 1 0-4 0Z",
+  laptop: "M4 5h16v11H4zM2 19h20",
+  receipt: "M5 3h14v18l-2.3-1.5-2.4 1.5-2.3-1.5-2.3 1.5-2.4-1.5L5 21V3ZM9 8h6M9 12h6M9 16h3",
+  mic: "M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3ZM5 11a7 7 0 0 0 14 0M12 18v4M8 22h8",
+  "thumbs-up": "M7 10v11H3V10h4Zm0 0 4-8a3 3 0 0 1 3 3v4h5.5a2 2 0 0 1 2 2.3l-1.4 8a2 2 0 0 1-2 1.7H7",
+  "thumbs-down": "M7 14V3H3v11h4Zm0 0 4 8a3 3 0 0 0 3-3v-4h5.5a2 2 0 0 0 2-2.3l-1.4-8a2 2 0 0 0-2-1.7H7",
+  history: "M3 12a9 9 0 1 0 2.6-6.4L3 8M3 3v5h5M12 7v5l3 2",
+  wand: "M3 21 14 10M16 3v4M14 5h4M20 9v3M18.5 10.5h3M9 3v2M8 4h2",
+  building: "M4 21V3h12v18M16 9h4v12M2 21h20M8 7h4M8 11h4M8 15h4",
+  // Canvas tools (flow-canvas): the rail, the zoom bar, the arrange buttons.
+  "mouse-pointer": "M5 3l5.8 16.5 2.4-6.8 6.8-2.4L5 3ZM13.2 12.7 19 18.5",
+  hand: "M8 12V5.5a1.5 1.5 0 0 1 3 0V11M11 10.5V4a1.5 1.5 0 0 1 3 0v6.5M14 10.5V5.5a1.5 1.5 0 0 1 3 0V14a7 7 0 0 1-7 7h-.4a6 6 0 0 1-4.7-2.3l-2.3-2.9a1.6 1.6 0 0 1 2.4-2.1L8 16",
+  "sticky-note": "M4 4h16v10l-6 6H4V4ZM14 20v-6h6",
+  square: "M4 4h16v16H4z",
+  frame: "M7 3v18M17 3v18M3 7h18M3 17h18",
+  connector: "M4 20C4 11 10 5 19 5m-4-3.5L19 5l-4 3.5M4 20h.01",
+  maximize: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5",
+  undo: "M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3",
+  redo: "m15 14 5-5-5-5M20 9H9a5 5 0 0 0 0 10h3",
+  keyboard: "M2 6h20v12H2zM6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10",
+  // Sketch tools (sketch-canvas): the diamond shape and the eraser.
+  diamond: "M12 3 21 12 12 21 3 12Z",
+  eraser: "M20 20H8.5l-4-4a2 2 0 0 1 0-2.8l8.8-8.8a2 2 0 0 1 2.8 0l3.5 3.5a2 2 0 0 1 0 2.8L12 20M8.5 9.5l6 6",
+  highlighter: "m14.5 4.5 5 5-7.5 7.5H8.5L7 15.5v-3.5ZM11 8l5 5M7 15.5 4 18.5l2 1.5h5M14 21h6",
+  "lock-open": "M5 11h14v10H5zM8 11V7a4 4 0 0 1 7.7-1.5",
+  "bring-front": "M12 14V3M8 7l4-4 4 4M4 15l8 5 8-5",
+  "send-back": "M12 3v11M8 10l4 4 4-4M4 15l8 5 8-5",
+  // Column types (spreadsheet): a number field, a checkbox field.
+  hash: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18",
+  "square-check": "M4 4h16v16H4zM8 12l3 3 5-6",
+  target: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM12 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+  flag: "M5 21V4m0 0h11l-2 4 2 4H5",
+  "circle-help": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM9.5 9.2a2.6 2.6 0 0 1 5 .9c0 1.7-2.5 2.3-2.5 3.9M12 17h.01",
+  // Playback (audio-player): skip back / forward, sound on / off.
+  "rotate-ccw": "M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5",
+  "rotate-cw": "M21 12a9 9 0 1 1-3-6.7L21 8M21 3v5h-5",
+  volume: "M11 5 6 9H2v6h4l5 4V5ZM15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14",
+  "volume-x": "M11 5 6 9H2v6h4l5 4V5ZM22 9l-6 6M16 9l6 6",
+  navigation: "M3 11 21 3l-8 18-2-8Z",
+  locate: "M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM12 2v3M12 19v3M2 12h3M19 12h3",
+  route: "M6 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM18 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15",
+  // View kinds (work-views): a board's columns, a table's grid, a gantt's bars.
+  kanban: "M4 4h4v14H4zM10 4h4v9h-4zM16 4h4v16h-4z",
+  table: "M3 4h18v16H3zM3 10h18M3 15h18M9 10v10",
+  gantt: "M4 4v16h16M8 8h6M11 12h7M9 16h5",
 };
 
-export const ICON_NAMES = Object.keys(PATHS);
+const BRANDS = {
+  google: "M18.9 6.2A9 9 0 1 0 21 12v-1.8h-8.8v3.4h4.96A5.4 5.4 0 1 1 16.14 8.53Z",
+  github: "M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19ZM10 21.3v-2.9c-2.8-.4-4.5-2-4.5-5 0-1.1.4-2.1 1.1-2.9-.2-.7-.2-1.7.2-2.7 1 0 2 .5 2.8 1.1a8 8 0 0 1 4.8 0c.8-.6 1.8-1.1 2.8-1.1.4 1 .4 2 .2 2.7.7.8 1.1 1.8 1.1 2.9 0 3-1.7 4.6-4.5 5v2.9ZM10 20.2c-2.4.4-3.5-.5-4.3-2l1-.4c.6 1.1 1.4 1.7 3.3 1.3Z",
+  apple: "M12 7.8C10.5 6.8 8.8 6.6 7.4 7.4 4.8 8.9 4.4 12.8 5.9 16.2c1 2.4 2.5 4.4 4.1 4.4.9 0 1.3-.5 2-.5s1.1.5 2 .5c1.6 0 3-1.7 4-3.6.5-.8.9-1.4 1.3-2A3.2 3.2 0 0 1 18.3 9.3c-.8-1.2-2-2.1-3.5-2.2-1 0-1.9.3-2.8.7ZM12.2 6.3c0-1.8 1.3-3.2 3.1-3.3 0 1.8-1.3 3.2-3.1 3.3Z",
+  microsoft: "M3 3h8.5v8.5H3zM12.5 3H21v8.5h-8.5zM3 12.5h8.5V21H3zM12.5 12.5H21V21h-8.5z",
+  "x-logo": "M2.8 3h6l12.4 18h-6ZM5.3 4.3l10.6 15.4h2.8L8.1 4.3ZM19.3 3h1.9l-6.6 7.4-.8-1ZM4.7 21H2.8l6.6-7.4.8 1Z",
+  linkedin: "M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2ZM6.4 7.6a1.3 1.3 0 1 0 2.6 0 1.3 1.3 0 1 0-2.6 0ZM6.6 10h2.3v7.5H6.6ZM10.8 10H13v1.1c.5-.8 1.4-1.3 2.5-1.3 2 0 3 1.2 3 3.4v4.3h-2.3v-3.9c0-1.1-.4-1.8-1.4-1.8s-1.7.7-1.7 1.8v3.9h-2.3Z",
+  instagram: "M7.5 2.5h9a5 5 0 0 1 5 5v9a5 5 0 0 1-5 5h-9a5 5 0 0 1-5-5v-9a5 5 0 0 1 5-5ZM7.5 4.3a3.2 3.2 0 0 0-3.2 3.2v9a3.2 3.2 0 0 0 3.2 3.2h9a3.2 3.2 0 0 0 3.2-3.2v-9a3.2 3.2 0 0 0-3.2-3.2ZM12 7.3a4.7 4.7 0 1 0 0 9.4 4.7 4.7 0 0 0 0-9.4Zm0 1.8a2.9 2.9 0 1 1 0 5.8 2.9 2.9 0 0 1 0-5.8ZM16.2 6.7a1.1 1.1 0 1 0 2.2 0 1.1 1.1 0 1 0-2.2 0Z",
+  youtube: "M2.5 7.5c.2-1.6 1.2-2.6 2.8-2.7 2.1-.2 4.4-.3 6.7-.3s4.6.1 6.7.3c1.6.1 2.6 1.1 2.8 2.7.2 1.5.3 3 .3 4.5s-.1 3-.3 4.5c-.2 1.6-1.2 2.6-2.8 2.7-2.1.2-4.4.3-6.7.3s-4.6-.1-6.7-.3c-1.6-.1-2.6-1.1-2.8-2.7-.2-1.5-.3-3-.3-4.5s.1-3 .3-4.5ZM10 8.8v6.4l5.5-3.2Z",
+  facebook: "M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19ZM10.3 21.4v-7.6H8.4v-2.5h1.9V9.4c0-2.5 1.4-3.9 3.7-3.9.9 0 1.6.1 1.9.1v2.2h-1.3c-1 0-1.4.6-1.4 1.4v2.1h2.6l-.4 2.5h-2.2v7.6Z",
+};
+
+export const ICON_NAMES = [...Object.keys(PATHS), ...Object.keys(BRANDS)];
 
 export function Icon({ name, size = 16, className, label }) {
-  const d = PATHS[name];
+  const brand = BRANDS[name];
+  const d = PATHS[name] || brand;
   if (!d) return null;
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
+      fill={brand ? "currentColor" : "none"}
+      fillRule={brand ? "evenodd" : undefined}
+      stroke={brand ? "none" : "currentColor"}
+      strokeWidth={brand ? undefined : "1.8"}
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden={label ? undefined : true}

package/templates/next/files/components/ui/image.jsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+import { Skeleton } from "./feedback";
+
+// Image — a picture of a thing: a file's thumbnail, a product shot, a
+// cover. The browser's own <img> (lazy loading, srcset, decoding) in a box
+// with the workspace's look: rounded, a Skeleton while it loads, an image
+// glyph on a muted fill when it fails or has no `src`. Never a raw <img>
+// in a surface. A person's face is an Avatar.
+//
+//   src, alt  `alt` is required: what the picture shows, or "" when it
+//             only decorates what the text beside it already says
+//   ratio     auto (the image's own shape; give `width` and `height` so
+//             the box holds its place while it loads) · square · video
+//             (16:9) · portrait (3:4) · photo (4:3) · wide (21:9), or a
+//             number (width / height, e.g. 2)
+//   fit       cover (fills the box, cropped; the default) · contain (all
+//             of it, on a muted fill)
+//   rounded   md (the default) · none · sm · lg · full (a circle, with a
+//             square ratio)
+//   loading   lazy (the default: fetched as it nears the screen) · eager
+//             (above the fold, the page's main picture)
+//   fallback  a node for the failed state, in place of the glyph
+//   className sizes the box (size-10, w-48, max-w-sm); every other prop
+//             (width, height, srcSet, sizes, onLoad…) goes to the <img>
+//
+// The box is the element that is sized and rounded; the <img> fills it.
+
+const RATIOS = {
+  square: "aspect-square",
+  video: "aspect-video",
+  portrait: "aspect-3/4",
+  photo: "aspect-4/3",
+  wide: "aspect-21/9",
+};
+
+const ROUNDED = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+const FITS = {
+  cover: "object-cover",
+  contain: "object-contain",
+};
+
+export function Image({
+  src,
+  alt,
+  ratio = "auto",
+  fit = "cover",
+  rounded = "md",
+  loading = "lazy",
+  fallback,
+  className,
+  onLoad,
+  onError,
+  width,
+  height,
+  ...rest
+}) {
+  const img = useRef(null);
+  const noAlt = alt === undefined;
+  useEffect(() => {
+    if (noAlt) console.warn('Image: `alt` is required — say what the picture shows, or alt="" when it only decorates.');
+  }, [noAlt]);
+  // "loading" · "loaded" · "failed", reset whenever src changes.
+  const [state, setState] = useState({ src, status: src ? "loading" : "failed" });
+  const status = state.src === src ? state.status : src ? "loading" : "failed";
+  if (state.src !== src) setState({ src, status });
+
+  // A server-rendered <img> can load or fail before React is listening.
+  useEffect(() => {
+    const el = img.current;
+    if (!el || !src || !el.complete) return;
+    setState({ src, status: el.naturalWidth > 0 ? "loaded" : "failed" });
+  }, [src]);
+
+  const auto = ratio === "auto" || ratio == null;
+  const named = typeof ratio === "string" ? RATIOS[ratio] : undefined;
+  const failed = status === "failed";
+  // An auto box has no shape of its own until the image arrives: borrow
+  // width / height, or a 4:3 box when a failed image has neither.
+  let aspect;
+  if (typeof ratio === "number" && ratio > 0) aspect = ratio;
+  else if (auto && width && height) aspect = `${width} / ${height}`;
+  else if (auto && failed) aspect = 4 / 3;
+
+  return (
+    <span
+      className={cx(
+        "relative block overflow-hidden bg-muted",
+        ROUNDED[rounded] ?? ROUNDED.md,
+        named,
+        className,
+      )}
+      style={aspect ? { aspectRatio: aspect } : undefined}
+    >
+      {src && !failed ? (
+        <img
+          ref={img}
+          src={src}
+          alt={alt ?? ""}
+          loading={loading}
+          decoding="async"
+          width={width}
+          height={height}
+          className={cx(
+            "block transition-opacity duration-200 motion-reduce:transition-none",
+            auto ? "h-auto w-full" : "absolute inset-0 size-full",
+            FITS[fit] ?? FITS.cover,
+            status === "loaded" ? "opacity-100" : "opacity-0",
+          )}
+          onLoad={(e) => {
+            setState({ src, status: "loaded" });
+            onLoad?.(e);
+          }}
+          onError={(e) => {
+            setState({ src, status: "failed" });
+            onError?.(e);
+          }}
+          {...rest}
+        />
+      ) : null}
+      {status === "loading" ? <Skeleton shape="rect" className="absolute inset-0 size-full" /> : null}
+      {failed ? (
+        <span
+          role={alt ? "img" : undefined}
+          aria-label={alt || undefined}
+          className="absolute inset-0 flex items-center justify-center text-muted-foreground"
+        >
+          {fallback ?? <Icon name="image" size={20} />}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/templates/next/files/components/ui/index.js

@@ -4,9 +4,54 @@
 export { cx } from "./cx";
 export { Icon, ICON_NAMES } from "./icon";
 export { Button, IconButton } from "./button";
-export { Field, Input, Textarea, Select, Switch, Checkbox } from "./field";
+export { Field, Input, TimeInput, Textarea, Select, Switch, Checkbox } from "./field";
 export { Card, Notice, Badge, Kicker, Empty } from "./notice";
 export { Sheet, Confirm } from "./sheet";
 export { Tabs, TabPanel } from "./tabs";
-export { Menu } from "./menu";
+export { Menu, MenuPanel } from "./menu";
+export { ContextMenu } from "./context-menu";
+export { Popover, usePopoverPosition, panelClass } from "./popover";
+export {
+  Calendar,
+  parseDate,
+  isDateString,
+  toDateString,
+  todayString,
+  addDays,
+  addMonths,
+  startOfMonth,
+  endOfMonth,
+  dayOfWeek,
+  formatDate,
+  firstDayOfWeek,
+} from "./calendar";
+export { DatePicker, DateInput, DATE_PRESETS } from "./date-picker";
+export { Tooltip, HoverCard } from "./tooltip";
 export { Depiction } from "./depiction";
+export { toast, Toaster } from "./toast";
+export { Carousel } from "./carousel";
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "./resizable";
+export { Avatar, AvatarGroup } from "./avatar";
+export { Breadcrumb } from "./breadcrumb";
+export { Pagination } from "./pagination";
+export { RadioGroup, Radio } from "./radio";
+export { Toggle, ToggleGroup } from "./toggle";
+export { ButtonGroup, ButtonGroupSeparator } from "./button-group";
+export { Collapsible, Accordion } from "./collapsible";
+export { Item, ItemGroup } from "./item";
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from "./table";
+export { Spinner, Skeleton, Progress } from "./feedback";
+export { Distribution } from "./distribution";
+export { Swatch } from "./swatch";
+export { Stat, StatGroup, Delta, StatusDot, Legend, Meter } from "./stat";
+export { Steps } from "./steps";
+export { Separator, Kbd, KbdGroup, AspectRatio } from "./separator";
+export { ScrollArea } from "./scroll-area";
+export { Slider } from "./slider";
+export { InputGroup, PasswordInput } from "./input-group";
+export { Image } from "./image";
+export { FileInput, FileDrop, fileMatches } from "./file-input";
+export { InputOTP } from "./input-otp";
+export { Command, CommandDialog, commandScore, commandFilter } from "./command";
+export { Combobox } from "./combobox";
+export { Rating } from "./rating";

package/templates/next/files/components/ui/input-group.jsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { isValidElement, useRef, useState } from "react";
+import { cx } from "./cx";
+import { Button, IconButton } from "./button";
+import { Icon } from "./icon";
+import { KbdGroup } from "./separator";
+import { useAutoGrow } from "./field";
+
+// InputGroup — an Input (or, multiline, a Textarea) with things attached: "https://" before it,
+// "USD" after it, a search glyph, a ⌘K hint, a copy button. The group is
+// the field: one border, one focus ring, one invalid red, one disabled
+// state, so it reads as a single control and never as an input with
+// stickers beside it. A native <input> inside, every prop not named here
+// goes to it (type, value, onChange, placeholder, autoComplete…); wrap
+// the group in <Field> and give it the same `id`. A press on an addon
+// puts the caret in the input, as a press on the field would.
+//
+//   icon      a glyph from ./icon at the start (search, mail, globe)
+//   prefix    text at the start, set close to what is typed ("https://")
+//   suffix    text at the end ("USD", ".makersclaw.com", "/ month")
+//   kbd       a shortcut hint at the end: "/" or ["⌘", "K"]. Shown from
+//             md up (a phone has no keyboard) and hidden from readers:
+//             pass aria-keyshortcuts="Meta+K" for them
+//   action    the button at the end: { label, icon?, onClick?, type?,
+//             variant? } — with `icon` it is an IconButton and `label` is
+//             what a reader says; without, a small text button. Or any
+//             node, for something else.
+//   invalid   marks the input aria-invalid; the whole group turns red
+//   multiline true: a <textarea> that grows with its text (from `minRows`,
+//             default 1, to `maxRows`, default 8, then it scrolls) — the
+//             chat composer, a comment box. The text takes the full width
+//             and the addons sit in a bar under it: icon, prefix and
+//             `tools` at the start, suffix, kbd and action at the end.
+//             `above` is a node inside the border over the text (the
+//             attached files). Keys are yours: onKeyDown goes to the
+//             textarea (Enter to send — mind e.nativeEvent.isComposing).
+//   tools     (multiline) nodes at the start of the bar: attach, a model menu
+//   above     (multiline) a node over the text, inside the one border
+//
+// The input draws no border of its own (it is not composed from <Input>,
+// whose border and ring would draw a box inside the box); the group
+// carries the same classes <Input> does, so the two sit in a form as
+// equals.
+
+const GROUP =
+  "flex w-full min-h-11 cursor-text items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-foreground " +
+  "has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring " +
+  "has-[input[aria-invalid=true]]:border-destructive " +
+  "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50";
+
+const FIELD =
+  "min-w-0 flex-1 self-stretch border-0 bg-transparent p-0 text-sm text-foreground outline-none " +
+  "placeholder:text-muted-foreground disabled:cursor-not-allowed";
+
+const ADDON = "shrink-0 select-none whitespace-nowrap text-muted-foreground";
+
+// The multi-line group: a column — above, the text, then the bar.
+const MULTI =
+  "flex w-full cursor-text flex-col rounded-md border border-input bg-background text-sm text-foreground " +
+  "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring " +
+  "has-[textarea[aria-invalid=true]]:border-destructive " +
+  "has-[textarea:disabled]:cursor-not-allowed has-[textarea:disabled]:opacity-50";
+
+const MULTI_FIELD =
+  "block w-full resize-none border-0 bg-transparent px-3 pt-3 pb-1 text-sm leading-5 text-foreground outline-none " +
+  "placeholder:text-muted-foreground disabled:cursor-not-allowed";
+
+export function InputGroup({ multiline = false, ...props }) {
+  if (multiline) return <MultilineGroup {...props} />;
+  const { tools, above, minRows, maxRows, ...one } = props; // multiline only
+  return <SingleLineGroup {...one} />;
+}
+
+// The trailing button, from `action`.
+function actionNode(action, disabled) {
+  if (action && typeof action === "object" && !isValidElement(action) && "label" in action) {
+    const { label, icon: glyph, variant, ...props } = action;
+    return glyph ? (
+      <IconButton icon={glyph} label={label} size="sm" variant={variant ?? "quiet"} disabled={disabled} {...props} />
+    ) : (
+      <Button size="sm" variant={variant ?? "secondary"} disabled={disabled} {...props}>
+        {label}
+      </Button>
+    );
+  }
+  return action || null;
+}
+
+function MultilineGroup({ icon, prefix, suffix, kbd, action, tools, above, invalid, disabled, minRows = 1, maxRows = 8, onInput, className, ref, ...rest }) {
+  const grow = useAutoGrow({ minRows, maxRows, value: rest.value, outer: ref });
+  const area = useRef(null);
+
+  function focusText(e) {
+    if (e.target.closest("button, a, input, select, textarea, [role=button]")) return;
+    e.preventDefault();
+    area.current?.focus();
+  }
+
+  const keys = kbd ? (Array.isArray(kbd) ? kbd : [kbd]) : null;
+  const end = actionNode(action, disabled);
+  const start = icon || prefix || tools;
+
+  return (
+    <div className={cx(MULTI, className)} onMouseDown={focusText}>
+      {above ? <div className="min-w-0 cursor-default">{above}</div> : null}
+      <textarea
+        ref={(el) => {
+          area.current = el;
+          return grow.ref(el);
+        }}
+        rows={minRows}
+        disabled={disabled}
+        aria-invalid={invalid ? true : undefined}
+        className={MULTI_FIELD}
+        onInput={(e) => {
+          grow.fit();
+          onInput?.(e);
+        }}
+        {...rest}
+      />
+      <div className="flex min-h-11 items-center gap-1 px-1.5 pb-1.5">
+        {start ? (
+          <div className="flex min-w-0 items-center gap-1">
+            {icon ? <Icon name={icon} className={cx(ADDON, "mx-1.5")} /> : null}
+            {prefix ? <span className={cx(ADDON, "px-1.5")}>{prefix}</span> : null}
+            {tools}
+          </div>
+        ) : null}
+        <div className="min-w-0 flex-1" />
+        {suffix ? <span className={cx(ADDON, "px-1.5")}>{suffix}</span> : null}
+        {keys ? (
+          <span className="hidden shrink-0 px-1.5 md:inline-flex" aria-hidden="true">
+            <KbdGroup keys={keys} />
+          </span>
+        ) : null}
+        {end ? <span className="flex shrink-0 items-center">{end}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+function SingleLineGroup({ icon, prefix, suffix, kbd, action, invalid, disabled, className, ref, ...rest }) {
+  const input = useRef(null);
+
+  function focusInput(e) {
+    if (e.target.closest("button, a, input, select, textarea")) return;
+    e.preventDefault();
+    input.current?.focus();
+  }
+
+  const keys = kbd ? (Array.isArray(kbd) ? kbd : [kbd]) : null;
+  const end = actionNode(action, disabled);
+
+  return (
+    <div className={cx(GROUP, end && "pr-1", className)} onMouseDown={focusInput}>
+      {icon ? <Icon name={icon} className={ADDON} /> : null}
+      {prefix ? <span className={cx(ADDON, "-mr-1.5")}>{prefix}</span> : null}
+      <input
+        ref={(el) => {
+          input.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref) ref.current = el;
+        }}
+        disabled={disabled}
+        aria-invalid={invalid ? true : undefined}
+        className={FIELD}
+        {...rest}
+      />
+      {suffix ? <span className={ADDON}>{suffix}</span> : null}
+      {keys ? (
+        <span className="hidden shrink-0 md:inline-flex" aria-hidden="true">
+          <KbdGroup keys={keys} />
+        </span>
+      ) : null}
+      {end ? <span className="flex shrink-0 items-center">{end}</span> : null}
+    </div>
+  );
+}
+
+/**
+ * A password field with a show/hide toggle: an InputGroup whose action is
+ * an IconButton (eye / eye-off) with aria-pressed, named "Show password"
+ * — its pressed state says whether the text is showing. Every other prop
+ * goes to the <input> as in InputGroup: `autoComplete` defaults to
+ * "current-password"; pass "new-password" on a sign-up or a reset so the
+ * browser offers to generate one. `icon`, `invalid`, `disabled`, `id`
+ * work as in InputGroup. `showLabel` renames the toggle.
+ */
+export function PasswordInput({ autoComplete = "current-password", showLabel = "Show password", disabled, ...rest }) {
+  const [shown, setShown] = useState(false);
+  return (
+    <InputGroup
+      {...rest}
+      type={shown ? "text" : "password"}
+      autoComplete={autoComplete}
+      autoCapitalize="off"
+      autoCorrect="off"
+      spellCheck={false}
+      disabled={disabled}
+      action={
+        <IconButton
+          icon={shown ? "eye-off" : "eye"}
+          label={showLabel}
+          aria-pressed={shown}
+          size="sm"
+          disabled={disabled}
+          onClick={() => setShown((v) => !v)}
+        />
+      }
+    />
+  );
+}