@snacky/ui 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -4,6 +4,28 @@ How `@snacky/ui` got to its current state. The README documents what the
 package *is*; this documents how it got there, including the mistakes, so the
 verification claims in the README can be taken at face value.
 
+## ImagePlaceholder added, a non-Figma utility (0.7.0)
+
+Every image prop (`ProductCard.imageUrl`, `ProductImage.src`, `Avatar.src`,
+the Banner family's `imageUrl`) has always been required, deliberately - this
+package ships no photography, so there was never anything to default to.
+That was correct as far as it went, but it left a real gap: a consumer with a
+genuinely empty state (a new product with no photo yet) had no sanctioned way
+to say so, and either left `src` empty (silently falling through to the
+browser's own broken-image icon) or invented their own placeholder, which is
+exactly the kind of gap that produced emoji fallbacks elsewhere in this
+project's history.
+
+`ImagePlaceholder` closes it: a neutral `bg-surface-variant` box with a
+generic "no image" glyph in `icon-disabled`. The glyph is hand-drawn
+(frame/circle/mountain outline), not one of `SnackyIcons` - it is decorative
+placeholder artwork, not a real icon prop, and the first instinct (reuse the
+package's own `camera` icon, reasoning "at least it's a real glyph") read as
+"take a photo" rather than "no image here" once someone actually looked at
+it. This is a standalone utility, not the 25th documented component - there
+is no Figma node for it, and the README says so explicitly rather than
+letting the count quietly drift.
+
 ## Icon set replaced with the real Figma artwork (0.3.0)
 
 The package originally shipped a hand-drawn "starter" icon set: roughly 30
@@ -91,3 +113,16 @@ unverified - see the README's Verification status.
   not: tsup extracts the CSS to a standalone `dist/index.css` and never
   re-injects it into the JS entry, so anyone following the snippet verbatim got
   unstyled components. The correct import is `@snacky/ui/styles.css`.
+- **PointBalanceBanner stretched to fill its container (0.6.2).** Figma's frame
+  hugs its content at 312px, it was never meant to fill full-bleed, but the
+  component set `width: 100%` plus `justify-content: space-between` anyway.
+  Inside any container wider than 312px (which is most of them), the Points and
+  Balance groups spread apart across the extra width instead of staying grouped
+  on the left like Figma. Switched to `display: inline-flex` (hugs by default)
+  with an explicit `gap`, matching the value already recorded in
+  `components.json`'s spec for this variant.
+- **AlertBanner clipped a long message (0.6.2).** The row had a fixed
+  `height: 40px`, Figma's single-line sample height, not a cap. A message long
+  enough to wrap onto a second line got clipped instead of growing the banner.
+  Changed to `min-height: 40px` and let the message text take `flex: 1` so it
+  shrinks and wraps within the row instead of overflowing sideways.

package/README.md

@@ -94,6 +94,32 @@ normally pass no colour. To tint one deliberately, use `color`:
 
 Names are listed under **What's here** below. `outline` has 42, `solid` has 11.
 
+### 4. Handle a missing image
+
+Every image slot (`ProductCard`'s `imageUrl`, `ProductImage`'s `src`,
+`Avatar`'s `src`, the Banner family's `imageUrl`) is a **required** prop, on
+purpose - this package ships no photography, so there is no fallback to fall
+back to. If you leave one out anyway, you get the browser's own broken-image
+icon, not anything from this design system.
+
+For a genuinely empty state (a new product with no photo yet, a user with no
+avatar), pass `ImagePlaceholder` explicitly instead of inventing your own:
+
+```tsx
+import { ImagePlaceholder, ProductCard } from '@snacky/ui';
+
+{photo ? (
+  <ProductCard imageUrl={photo} ... />
+) : (
+  <ImagePlaceholder width={152} height={128} />
+)}
+```
+
+It renders a neutral `bg-surface-variant` box with a generic "no image" glyph
+in `icon-disabled` - not a `SnackyIcons` icon, since this is decorative
+placeholder artwork rather than a real icon prop. Apply your own
+`className`/border radius to match whatever slot it fills.
+
 ## What's here
 
 All 24 documented components, each matching its `code.tsx` sample's prop
@@ -118,6 +144,9 @@ the same shell with different `children`, so you get two components rather
 than 22 near-duplicates. Their spacing varies per variant in Figma, so the
 shells ship sensible defaults and expect `children` to override it.
 
+Plus `ImagePlaceholder`, a standalone utility (see **Handle a missing image**
+above) - not one of the 24, there is no Figma node for it.
+
 ## Verification status
 
 Every component is diffed against `index.html`'s own Live Preview

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   HeroBanner: () => HeroBanner,
   IconButton: () => IconButton,
   Illustration: () => Illustration,
+  ImagePlaceholder: () => ImagePlaceholder,
   NavBar: () => NavBar,
   NotificationBadge: () => NotificationBadge,
   NotificationListItem: () => NotificationListItem,
@@ -1257,6 +1258,39 @@ function ProductCard(props) {
     }
   );
 }
+
+// src/components/ImagePlaceholder/ImagePlaceholder.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function ImagePlaceholder({ width, height, className }) {
+  const iconSize = Math.round(Math.min(width, height) * 0.32);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      className: cx("snacky-image-placeholder", className),
+      style: { width, height },
+      role: "img",
+      "aria-label": "No image",
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        "svg",
+        {
+          width: iconSize,
+          height: iconSize,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polyline", { points: "21 15 16 10 5 21" })
+          ]
+        }
+      )
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -1277,6 +1311,7 @@ function ProductCard(props) {
   HeroBanner,
   IconButton,
   Illustration,
+  ImagePlaceholder,
   NavBar,
   NotificationBadge,
   NotificationListItem,