@lmb-it/kitsconcerto-native 0.1.285 → 0.1.287

package/packages/types/src/Theme/defaultTheme.js

@@ -1200,6 +1200,195 @@ const defaultTheme = {
       }
     },
     // ─── Sidebar ──────────────────────────────────────────
+    // ─── ImageCropper ─────────────────────────────────
+    // ⚠️ NUMBERS, NOT CSS STRINGS, FOR ANYTHING NATIVE ALSO READS — the
+    // same rule `Input.inputGroup` carries: React Native's ViewStyle wants
+    // `borderWidth: 1`, web treats the bare `1` as `1px`, and one shared
+    // declaration then renders the same frame on both.
+    /* ─── ImageCropper ────────────────────────────────────────
+               ⛔ EVERY NUMBER HERE IS MEASURED OFF THE MOCKUP,
+               `UML/UI/ClientPortal/AlphaMatch - Image Cropper.dc.html`, which is
+               the design source for this component. Changing one of them is a
+               design change, not a tidy-up — check the mockup first.
+    
+               ⚠️ THE STAGE AND ITS CHROME DO NOT INVERT WITH THE COLOUR MODE. A
+               photograph has to read against the stage in light mode and dark
+               mode alike, so the dark surfaces below are literals and the alpha
+               families (literal in both modes by construction) carry the rest.
+               The light chrome — header, footer, card — goes through tokens. */
+    ImageCropper: {
+      root: {
+        style: {
+          backgroundColor: "surface-card",
+          borderRadius: 20,
+          overflow: "hidden"
+          /* ⚠️ THE CARD'S DROP SHADOW IS NOT HERE. On web
+             `IStyleClasses` types `shadowColor`/`shadowOpacity`/
+             `shadowRadius`/`shadowOffset`/`elevation` as `null` —
+             they are the NATIVE spelling, and putting them in a slot
+             is a type error in the web project (the `handle` slot
+             below is the pre-existing instance of exactly that).
+             Each platform file applies the mockup's
+             `0 24px 64px rgba(0,0,0,.35)` in its own spelling:
+             `boxShadow` on web, `shadow*` on native. */
+        }
+      },
+      header: {
+        style: {
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 18,
+          paddingBottom: 18,
+          borderBottomWidth: 1,
+          borderColor: "#F0F1F3",
+          gap: 12
+        }
+      },
+      title: {
+        style: {
+          fontSize: 17,
+          fontWeight: "800",
+          fontColor: "text-primary",
+          /* ⚠️ A STRING WITH UNITS. `letterSpacing` is typed
+             `LetterSpacing<0 | (string & {})>`, so a bare -0.17 does
+             not compile — and the mockup writes `-.01em` anyway. */
+          letterSpacing: "-0.01em"
+        }
+      },
+      content: {
+        style: {
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 22,
+          paddingBottom: 22,
+          /* The mockup's left column: stage, then the tool row, 14 apart. */
+          gap: 14
+        }
+      },
+      /* The stage. Dark on purpose: a photo reads against it in either
+         colour mode, and a light stage makes every pale image look like
+         it has no edges. */
+      container: {
+        style: {
+          backgroundColor: "#0E1A1C",
+          borderRadius: 14,
+          overflow: "hidden"
+        }
+      },
+      footer: {
+        style: {
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 14,
+          paddingBottom: 14,
+          borderTopWidth: 1,
+          borderColor: "#F0F1F3",
+          gap: 10
+        }
+      },
+      icon: { style: { fontColor: "#6B7280" } },
+      text: { style: { fontSize: 12.5, fontColor: "#9CA3AF" } },
+      /* ⛔ THE SCRIM IS AN ALPHA TOKEN, NOT A SOLID. `black-alpha-*` is
+                     literal in both colour modes — a scrim that inverted in dark mode
+                     would light UP the area the user is cropping away.
+      
+                     ⚠️ 0.66, NOT 0.74. The mockup uses two different dims and they
+                     are not interchangeable: 0.66 is the scrim around the window,
+                     0.74 is the full-stage overlay while saving. */
+      shade: { style: { backgroundColor: "rgba(6,14,16,0.66)" } },
+      cropWindow: { style: { borderWidth: 2, borderColor: "#FFFFFF" } },
+      gridLine: { style: { backgroundColor: "white-alpha-50" } },
+      /* ⚠️ A ROUND KNOB WITH A TEAL RING, not a bare square. Against a
+                     photo a flat white square disappears into any pale area; the ring
+                     and the drop shadow are what keep a grip findable on a bright
+                     image, and the mockup draws the ring in the accent so a grip
+                     never reads as part of the picture.
+      
+                     ⚠️ THE SIZE HERE IS THE CORNER KNOB'S. The four EDGE grips are
+                     bars, not circles — the platform files size those from
+                     `HANDLE_BAR_LONG` / `HANDLE_BAR_SHORT`, because one slot cannot
+                     carry two shapes. */
+      handle: {
+        style: {
+          backgroundColor: "#FFFFFF",
+          borderRadius: 999,
+          width: 16,
+          height: 16,
+          borderWidth: 3,
+          borderColor: "#20AAB0"
+          /* ⛔ NO `shadow*`/`elevation` HERE, AND THIS IS THE ONE THAT
+             BROKE A RELEASE. They are the NATIVE spelling; on web
+             `IStyleClasses` types all five as `null`, so they are a
+             type ERROR — and `packages/types` is built with
+             `tsc -p tsconfig.web.json`, an EMITTING build that
+             `publish.yml` runs as its first step and that must exit
+             zero. Five keys here failed that step and the release
+             never reached npm.
+             The grip's drop shadow is applied by the platform file
+             instead: `boxShadow` in `index.web.tsx`. Native renders
+             no grips at all — it fixes the window and moves the
+             image — so there is nothing to spell there. */
+        }
+      },
+      zoomChip: {
+        style: {
+          backgroundColor: "black-alpha-60",
+          fontColor: "#FFFFFF",
+          borderRadius: 13,
+          paddingLeft: 10,
+          paddingRight: 10,
+          height: 26,
+          fontSize: 11.5,
+          fontWeight: "700"
+        }
+      },
+      /* The mockup rings the preview in white and floats it, rather than
+         outlining it — an outline on a photo reads as part of the photo. */
+      previewFrame: {
+        style: {
+          borderWidth: 4,
+          borderColor: "#FFFFFF",
+          borderRadius: 12,
+          overflow: "hidden",
+          backgroundColor: "#E5E7EB"
+          /* The float — `0 4px 14px rgba(0,0,0,.14)` — is applied by
+             each platform file, for the reason given on `root`. */
+        }
+      },
+      /* ⛔ THE DROP TARGET LIVES ON THE STAGE, NOT INSTEAD OF IT. It used
+         to be a light box that replaced the dark stage entirely, so
+         choosing a photo made the whole component change colour. The
+         mockup keeps the stage and insets a dashed frame inside it. */
+      dropZone: {
+        style: {
+          borderWidth: 1.5,
+          borderStyle: "dashed",
+          borderColor: "white-alpha-20",
+          borderRadius: 14,
+          backgroundColor: "#0E1A1C",
+          padding: 20,
+          gap: 9
+        }
+      },
+      progressFill: { style: { backgroundColor: "#20AAB0", height: 5, borderRadius: 999 } },
+      /* ⛔ THE SHAPE SLOT, AND IT CARRIES THE *RECTANGLE'S* RADIUS. The
+                     circle is NOT a 999 pill set here — `maskShape: 'circle'` makes
+                     the component use a true 50%, because a pill radius on a window
+                     that is wider than it is tall gives a STADIUM, not a circle.
+                     That is exactly what shipped for one render of the 16:9 cover
+                     story: 999 leaked out of this slot into the rectangle case and
+                     drew a lozenge. What belongs here is the corner rounding a
+                     RECTANGULAR window should have; the circle overrides it.
+      
+                     ⚠️ 3, NOT 12 — the mockup's cover window is very nearly square
+                     cornered, because a banner crop with 12px corners does not match
+                     the banner it is cropped for. */
+      mask: { style: { borderRadius: 3 } },
+      /* The zoom rail sits on the dark stage on a phone, so its unfilled
+         half is a white alpha rather than a surface token. */
+      track: { style: { backgroundColor: "white-alpha-20", borderRadius: 999, height: 4 } },
+      thumb: { style: { backgroundColor: "#20AAB0", borderRadius: 999 } }
+    },
     Sidebar: {
       root: {
         style: {