hazo_images 1.9.0 → 1.11.0

package/CHANGE_LOG.md

@@ -1,5 +1,61 @@
 # hazo_images Change Log
 
+## 1.11.0 — 2026-09-19
+
+### Changed
+
+Migrated this package's i18n bridge onto the canonical `hazo_core/i18n`
+(`createPackageT`/`resolvePackageLocale`), deleting the local
+`src/lib/create_package_t.ts` copy. Same shape (flat, literal-dotted
+`src/locales/en.json` keys, `{{var}}` mustache interpolation) — this is an
+internal wiring change, not a behavior change for consumers, and the four
+UI components (`ImageUploader`, `ImageViewer`, `ImageEditorDialog`,
+`ImageAnnotator`) now each call `createPackageT('hazo_images', en)` from
+`hazo_core/i18n` instead of the deleted local file. `hazo_i18n` peer range
+bumped `^0.3.0` → `^0.5.0` (still optional). `hazo_core` peer/devDep bumped
+`^2.3.0` → `^2.4.0` — `hazo_core/i18n` doesn't exist before 2.4.0, so the
+old range was unsatisfiable for this migration.
+
+Also newly exports `t`, `createPackageT`, `resolvePackageLocale`, and the
+`TFunc` type from `hazo_images/ui` — previously the bridge wasn't reachable
+from any public entry point, which blocked writing an autotest against the
+real catalog. Consumers that want this package's own translator (e.g. to
+extend/override strings) can now import it directly instead of re-deriving
+it from `src/locales/en.json`.
+
+### Fixed
+
+- `ImageEditorDialog`'s color-input hex-value `aria-label` concatenated a raw
+  English string (`` `${label} hex value` ``) instead of going through `t()`.
+  Extracted into a new catalog key, `editor.hex_value_label` (`"{{label}}
+  hex value"`), and wired through `t('editor.hex_value_label', { label })`.
+
+### Added
+
+- `test-app` `/autotest` page: new `hazo_images_i18n` scenario group
+  (catalog loads, all keys resolve, interpolation, coverage threshold).
+
+## 1.10.0 — 2026-08-04
+
+### Fixed
+
+Moved one package from optional `peerDependencies` to `dependencies`. It is
+imported statically at the top level of this package's own `dist/`, but was
+declared as an *optional* peer — and npm never auto-installs an optional peer,
+under any `legacy-peer-deps` setting. The result was a package that could not
+run as shipped: a consumer installed it, imported it, and the build failed with
+module-not-found on a package it had never heard of and had no reason to
+declare. It is an implementation detail of this package, so this package now
+brings it.
+
+- react-konva@^18.2.16 || ^19.2.5
+
+Dropped the `optional` flag on `react` in `peerDependenciesMeta`. It is
+imported statically and this package cannot render without it, so marking
+it optional understated a hard requirement. It stays a peer — the host controls the
+version and a single instance must be shared.
+
+
 ## 1.9.0 — 2026-07-21
 
 ### Added

package/dist/ui/index.d.ts

@@ -1,3 +1,5 @@
+import * as hazo_core_i18n from 'hazo_core/i18n';
+export { TFunc, createPackageT, resolvePackageLocale } from 'hazo_core/i18n';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
@@ -406,4 +408,6 @@ declare function cn(...parts: Array<string | false | null | undefined>): string;
  */
 declare function canDecodeImage(file: File): Promise<boolean>;
 
-export { type AnnotatorShape, type AnnotatorTool, type ArrowShape, type CircleShape, DEFAULT_IMAGE_EDIT_CONTROLS, ImageAnnotator, type ImageAnnotatorProps, type ImageEditControls, type ImageEditTab, ImageEditorDialog, type ImageEditorDialogProps, type ImageProcessOptions, type ImageProcessResult, type ImageProcessThumbnail, ImageUploader, type ImageUploaderProps, ImageViewer, type ImageViewerProps, type InputOption, type PenShape, type ProcessFn, type ResizeBox, type ResizeHandle, ResizeHandleOverlay, type ResizeHandleOverlayProps, type TabElement, type ValidationError, type ValidationResult, addShape, canDecodeImage, clearShapes, cn, controlValuesToOptions, defaultControlValues, undoShape, validate_image_edit_controls };
+declare const t: hazo_core_i18n.TFunc;
+
+export { type AnnotatorShape, type AnnotatorTool, type ArrowShape, type CircleShape, DEFAULT_IMAGE_EDIT_CONTROLS, ImageAnnotator, type ImageAnnotatorProps, type ImageEditControls, type ImageEditTab, ImageEditorDialog, type ImageEditorDialogProps, type ImageProcessOptions, type ImageProcessResult, type ImageProcessThumbnail, ImageUploader, type ImageUploaderProps, ImageViewer, type ImageViewerProps, type InputOption, type PenShape, type ProcessFn, type ResizeBox, type ResizeHandle, ResizeHandleOverlay, type ResizeHandleOverlayProps, type TabElement, type ValidationError, type ValidationResult, addShape, canDecodeImage, clearShapes, cn, controlValuesToOptions, defaultControlValues, t, undoShape, validate_image_edit_controls };

package/dist/ui/index.js

@@ -1,3 +1,67 @@
+// src/locales/en.json
+var en_default = {
+  "uploader.default_label": "Drop an image here, or click to browse",
+  "uploader.replace_hint": "Click or drag to replace",
+  "uploader.browse": "Browse files",
+  "viewer.before": "Before",
+  "viewer.after": "After",
+  "annotator.toolbar_aria": "Annotation tools",
+  "annotator.tool.pen.label": "Pen",
+  "annotator.tool.pen.hint": "Freehand pen \u2014 draw by dragging",
+  "annotator.tool.arrow.label": "Arrow",
+  "annotator.tool.arrow.hint": "Arrow \u2014 drag from tail to head",
+  "annotator.tool.circle.label": "Circle",
+  "annotator.tool.circle.hint": "Circle \u2014 drag to size an ellipse",
+  "annotator.tool.bubble.label": "Speech bubble",
+  "annotator.tool.bubble.hint": "Speech bubble \u2014 drag to size, then type",
+  "annotator.tool.text.label": "Text",
+  "annotator.tool.text.hint": "Text \u2014 click to place, then type",
+  "annotator.color": "Color",
+  "annotator.color_swatch_aria": "Color {{color}}",
+  "annotator.custom_color": "Custom",
+  "annotator.stroke_width": "Stroke width",
+  "annotator.size": "Size",
+  "annotator.width_px": "{{width}}px",
+  "annotator.undo": "Undo",
+  "annotator.redo": "Redo",
+  "annotator.clear": "Clear",
+  "annotator.clear_all_tooltip": "Clear all",
+  "annotator.save_tooltip": "Flatten image + markup to PNG",
+  "annotator.save": "Save",
+  "annotator.loading": "Loading image\u2026",
+  "annotator.text_placeholder": "Type\u2026",
+  "editor.title": "Edit image",
+  "editor.trigger": "Edit image",
+  "editor.save": "Save",
+  "editor.cancel": "Cancel",
+  "editor.processing": "Processing\u2026",
+  "editor.reset": "Reset",
+  "editor.crop": "Crop image",
+  "editor.crop_done": "Done",
+  "editor.color_clear": "Clear",
+  "editor.hex_value_default": "Hex value",
+  "editor.hex_value_label": "{{label}} hex value",
+  "editor.crop_drag_hint": "Drag the box to move \xB7 drag a handle to resize",
+  "editor.preview_alt": "Edited preview",
+  "editor.original_alt": "Original image",
+  "editor.preview_badge": "Preview",
+  "editor.original_badge": "Original",
+  "editor.no_image": "No image",
+  "editor.shape.rectangle": "Rectangle",
+  "editor.shape.square": "Square",
+  "editor.shape.circle": "Circle",
+  "editor.crop_section_label": "Crop",
+  "editor.crop_clear": "Clear",
+  "editor.shape_label": "Shape",
+  "editor.crop_draw_hint": "Click \u201C{{cropLabel}}\u201D to draw a crop region on the image.",
+  "editor.saved": "Saved: {{path}}",
+  "editor.crop_original_alt": "Crop original",
+  "editor.network_error": "Network error"
+};
+
+// src/ui/index.ts
+import { createPackageT as createPackageT5 } from "hazo_core/i18n";
+
 // src/ui/image-uploader.tsx
 import * as React from "react";
 import { Button } from "hazo_ui";
@@ -8,12 +72,14 @@ function cn(...parts) {
 }
 
 // src/ui/image-uploader.tsx
+import { createPackageT } from "hazo_core/i18n";
 import { jsx, jsxs } from "react/jsx-runtime";
+var t = createPackageT("hazo_images", en_default);
 function ImageUploader({
   onSelect,
   accept = "image/*",
   className,
-  label = "Drop an image here, or click to browse",
+  label = t("uploader.default_label"),
   disabled = false
 }) {
   const inputRef = React.useRef(null);
@@ -96,7 +162,7 @@ function ImageUploader({
         ),
         selectedFilename ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: selectedFilename }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Click or drag to replace" })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: t("uploader.replace_hint") })
         ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 text-center", children: label }),
         /* @__PURE__ */ jsx(
           Button,
@@ -109,7 +175,7 @@ function ImageUploader({
               e.stopPropagation();
               handleClick();
             },
-            children: "Browse files"
+            children: t("uploader.browse")
           }
         )
       ]
@@ -120,7 +186,9 @@ function ImageUploader({
 // src/ui/image-viewer.tsx
 import * as React2 from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "hazo_ui";
+import { createPackageT as createPackageT2 } from "hazo_core/i18n";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var t2 = createPackageT2("hazo_images", en_default);
 function ZoomableImage({
   src,
   alt,
@@ -150,8 +218,8 @@ function ImageViewer({
   before,
   after,
   className,
-  beforeLabel = "Before",
-  afterLabel = "After",
+  beforeLabel = t2("viewer.before"),
+  afterLabel = t2("viewer.after"),
   zoomable = true
 }) {
   if (!before && !after) return null;
@@ -201,6 +269,7 @@ import {
   TabsTrigger,
   TabsContent
 } from "hazo_ui";
+import { createPackageT as createPackageT3 } from "hazo_core/i18n";
 
 // src/ui/resize-handle-overlay.tsx
 import * as React3 from "react";
@@ -727,6 +796,7 @@ function controlValuesToOptions(values, controls) {
 
 // src/ui/image-editor-dialog.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var t3 = createPackageT3("hazo_images", en_default);
 var MIN_BOX = 16;
 var CSS_RENDERED_KEYS = [
   "rotate",
@@ -826,10 +896,10 @@ function ControlInput({ element, value, onChange }) {
           placeholder: "#ff0000",
           onChange: (e) => onChange(name, e.target.value),
           className: "w-28",
-          "aria-label": label ? `${label} hex value` : "Hex value"
+          "aria-label": label ? t3("editor.hex_value_label", { label }) : t3("editor.hex_value_default")
         }
       ),
-      value.trim() !== "" && /* @__PURE__ */ jsx4(Button2, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange(name, ""), children: "Clear" })
+      value.trim() !== "" && /* @__PURE__ */ jsx4(Button2, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange(name, ""), children: t3("editor.color_clear") })
     ] });
   }
   if (input_type === "textbox") {
@@ -933,7 +1003,7 @@ function CropBox({ src, crop, shape, onCropChange }) {
       {
         ref: imgRef,
         src,
-        alt: "Crop original",
+        alt: t3("editor.crop_original_alt"),
         className: "block h-auto w-auto max-h-[62vh] max-w-full object-contain",
         draggable: false,
         onLoad: measure
@@ -1035,7 +1105,7 @@ function ImageEditorDialog({
         onSave?.(res);
       }
     } catch (err) {
-      const msg = err instanceof Error ? err.message : "Network error";
+      const msg = err instanceof Error ? err.message : t3("editor.network_error");
       setError(msg);
       setResult({ ok: false, error: msg, errorType: "NetworkError" });
     } finally {
@@ -1073,13 +1143,13 @@ function ImageEditorDialog({
   function handleOpenChange(nextOpen) {
     onOpenChange?.(nextOpen);
   }
-  const resolvedTitle = labels?.title ?? "Edit image";
-  const resolvedSaveLabel = labels?.save ?? "Save";
-  const resolvedCancelLabel = labels?.cancel ?? "Cancel";
-  const resolvedProcessingLabel = labels?.processing ?? "Processing\u2026";
-  const resolvedResetLabel = labels?.reset ?? "Reset";
-  const resolvedCropLabel = labels?.crop ?? "Crop image";
-  const resolvedCropDoneLabel = labels?.cropDone ?? "Done";
+  const resolvedTitle = labels?.title ?? t3("editor.title");
+  const resolvedSaveLabel = labels?.save ?? t3("editor.save");
+  const resolvedCancelLabel = labels?.cancel ?? t3("editor.cancel");
+  const resolvedProcessingLabel = labels?.processing ?? t3("editor.processing");
+  const resolvedResetLabel = labels?.reset ?? t3("editor.reset");
+  const resolvedCropLabel = labels?.crop ?? t3("editor.crop");
+  const resolvedCropDoneLabel = labels?.cropDone ?? t3("editor.crop_done");
   const inCropMode = cropMode && Boolean(beforeUrl);
   const previewSrc = result?.ok ? result.preview : void 0;
   const stageSrc = previewSrc ?? beforeUrl ?? void 0;
@@ -1104,13 +1174,13 @@ function ImageEditorDialog({
   const stage = /* @__PURE__ */ jsxs3("div", { className: "relative flex min-h-[52vh] flex-1 items-center justify-center overflow-hidden rounded-lg bg-gray-900 p-4 lg:min-h-[64vh] lg:max-h-[72vh]", children: [
     inCropMode && beforeUrl ? /* @__PURE__ */ jsxs3("div", { className: "flex max-h-full flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsx4(CropBox, { src: beforeUrl, crop, shape: cropShape, onCropChange: setCrop }),
-      /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-400", children: "Drag the box to move \xB7 drag a handle to resize" })
+      /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-400", children: t3("editor.crop_drag_hint") })
     ] }) : stageSrc ? /* @__PURE__ */ jsxs3("div", { className: "relative inline-block", style: { transform: geometryTransform }, children: [
       /* @__PURE__ */ jsx4(
         "img",
         {
           src: stageSrc,
-          alt: stageIsPreview ? "Edited preview" : "Original image",
+          alt: stageIsPreview ? t3("editor.preview_alt") : t3("editor.original_alt"),
           className: "block max-h-[68vh] max-w-full object-contain",
           style: { filter: cssFilter },
           draggable: false
@@ -1123,14 +1193,14 @@ function ImageEditorDialog({
           style: { backgroundColor: tintColor, mixBlendMode: "color" }
         }
       )
-    ] }) : /* @__PURE__ */ jsx4("span", { className: "text-sm text-gray-500", children: "No image" }),
-    !inCropMode && stageSrc && /* @__PURE__ */ jsx4("span", { className: "absolute left-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium text-gray-200", children: stageIsPreview ? "Preview" : "Original" }),
+    ] }) : /* @__PURE__ */ jsx4("span", { className: "text-sm text-gray-500", children: t3("editor.no_image") }),
+    !inCropMode && stageSrc && /* @__PURE__ */ jsx4("span", { className: "absolute left-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium text-gray-200", children: stageIsPreview ? t3("editor.preview_badge") : t3("editor.original_badge") }),
     isProcessing && /* @__PURE__ */ jsx4("span", { className: "absolute right-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium text-gray-200", children: resolvedProcessingLabel })
   ] });
   const shapeOptions = [
-    { value: "rect", label: "Rectangle" },
-    { value: "square", label: "Square" },
-    { value: "circle", label: "Circle" }
+    { value: "rect", label: t3("editor.shape.rectangle") },
+    { value: "square", label: t3("editor.shape.square") },
+    { value: "circle", label: t3("editor.shape.circle") }
   ];
   const rail = /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 px-1 lg:w-80 lg:shrink-0 lg:max-h-[72vh] lg:overflow-y-auto", children: [
     error && /* @__PURE__ */ jsx4("div", { className: "rounded-md bg-red-50 border border-red-200 px-4 py-2 text-sm text-red-700", children: error }),
@@ -1150,7 +1220,7 @@ function ImageEditorDialog({
         ] }, el.name)),
         tab.tab_name === "Geometry" && beforeUrl && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3 mt-1 border-t border-gray-100 pt-3", children: [
           /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-gray-700", children: "Crop" }),
+            /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-gray-700", children: t3("editor.crop_section_label") }),
             /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
               crop && /* @__PURE__ */ jsx4(
                 Button2,
@@ -1162,7 +1232,7 @@ function ImageEditorDialog({
                     setCrop(null);
                     setCropMode(false);
                   },
-                  children: "Clear"
+                  children: t3("editor.crop_clear")
                 }
               ),
               /* @__PURE__ */ jsx4(
@@ -1178,7 +1248,7 @@ function ImageEditorDialog({
             ] })
           ] }),
           cropMode && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx4(Label, { className: "text-sm text-gray-700", children: "Shape" }),
+            /* @__PURE__ */ jsx4(Label, { className: "text-sm text-gray-700", children: t3("editor.shape_label") }),
             /* @__PURE__ */ jsx4("div", { className: "flex gap-1", children: shapeOptions.map((opt) => /* @__PURE__ */ jsx4(
               Button2,
               {
@@ -1203,18 +1273,11 @@ function ImageEditorDialog({
             "\xD7",
             crop.height,
             "px"
-          ] }) : /* @__PURE__ */ jsxs3("p", { className: "text-xs text-gray-500", children: [
-            "Click \u201C",
-            resolvedCropLabel,
-            "\u201D to draw a crop region on the image."
-          ] })
+          ] }) : /* @__PURE__ */ jsx4("p", { className: "text-xs text-gray-500", children: t3("editor.crop_draw_hint", { cropLabel: resolvedCropLabel }) })
         ] })
       ] }) }, tab.tab_name))
     ] }),
-    result?.ok && result.saved && /* @__PURE__ */ jsxs3("p", { className: "text-xs text-green-700 bg-green-50 rounded p-2 break-all", children: [
-      "Saved: ",
-      result.saved.path ?? result.saved.url
-    ] }),
+    result?.ok && result.saved && /* @__PURE__ */ jsx4("p", { className: "text-xs text-green-700 bg-green-50 rounded p-2 break-all", children: t3("editor.saved", { path: result.saved.path ?? result.saved.url ?? "" }) }),
     result?.saveError && /* @__PURE__ */ jsx4("p", { className: "text-xs text-red-600", children: result.saveError })
   ] });
   const dialogBody = /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -1267,7 +1330,7 @@ function ImageEditorDialog({
     return /* @__PURE__ */ jsx4(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx4(DialogContent, { className: cn("max-w-5xl", className), children: dialogBody }) });
   }
   return /* @__PURE__ */ jsxs3(Dialog, { onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx4(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx4(Button2, { type: "button", children: "Edit image" }) }),
+    /* @__PURE__ */ jsx4(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx4(Button2, { type: "button", children: t3("editor.trigger") }) }),
     /* @__PURE__ */ jsx4(DialogContent, { className: cn("max-w-5xl", className), children: dialogBody })
   ] });
 }
@@ -1336,7 +1399,9 @@ function redo(shapes, redoStack) {
 }
 
 // src/ui/image-annotator.tsx
+import { createPackageT as createPackageT4 } from "hazo_core/i18n";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var t4 = createPackageT4("hazo_images", en_default);
 var TOOL_IDS = ["pen", "arrow", "circle", "bubble", "text"];
 var DEFAULT_STROKE_COLOR = "#ef4444";
 var DEFAULT_STROKE_WIDTH = 4;
@@ -1355,11 +1420,11 @@ var PRESET_COLORS = [
 var BUBBLE_PADDING = 10;
 var fontSizeFor = (strokeWidth) => Math.max(12, Math.round(strokeWidth * 4));
 var TOOL_META = {
-  pen: { Icon: Pencil, label: "Pen", hint: "Freehand pen \u2014 draw by dragging" },
-  arrow: { Icon: MoveUpRight, label: "Arrow", hint: "Arrow \u2014 drag from tail to head" },
-  circle: { Icon: CircleIcon, label: "Circle", hint: "Circle \u2014 drag to size an ellipse" },
-  bubble: { Icon: MessageSquare, label: "Speech bubble", hint: "Speech bubble \u2014 drag to size, then type" },
-  text: { Icon: TypeIcon, label: "Text", hint: "Text \u2014 click to place, then type" }
+  pen: { Icon: Pencil, label: t4("annotator.tool.pen.label"), hint: t4("annotator.tool.pen.hint") },
+  arrow: { Icon: MoveUpRight, label: t4("annotator.tool.arrow.label"), hint: t4("annotator.tool.arrow.hint") },
+  circle: { Icon: CircleIcon, label: t4("annotator.tool.circle.label"), hint: t4("annotator.tool.circle.hint") },
+  bubble: { Icon: MessageSquare, label: t4("annotator.tool.bubble.label"), hint: t4("annotator.tool.bubble.hint") },
+  text: { Icon: TypeIcon, label: t4("annotator.tool.text.label"), hint: t4("annotator.tool.text.hint") }
 };
 function bubbleTailPoints(width, height) {
   const baseX = Math.min(28, width * 0.5);
@@ -1672,12 +1737,12 @@ function ImageAnnotator({
     });
   }
   const resolvedLabels = {
-    save: labels?.save ?? "Save",
-    loading: labels?.loading ?? "Loading image\u2026"
+    save: labels?.save ?? t4("annotator.save"),
+    loading: labels?.loading ?? t4("annotator.loading")
   };
   const iconBtn = "h-10 w-10";
   return /* @__PURE__ */ jsx5(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1.5", role: "toolbar", "aria-label": "Annotation tools", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1.5", role: "toolbar", "aria-label": t4("annotator.toolbar_aria"), children: [
       TOOL_IDS.map((id) => {
         const { Icon, label, hint } = TOOL_META[id];
         return /* @__PURE__ */ jsxs4(Tooltip, { children: [
@@ -1700,13 +1765,13 @@ function ImageAnnotator({
       /* @__PURE__ */ jsx5("span", { className: "mx-1 h-6 w-px self-center bg-gray-300", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs4(Tooltip, { children: [
         /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Popover, { children: [
-          /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button3, { type: "button", size: "icon", variant: "outline", className: iconBtn, "aria-label": "Color", children: /* @__PURE__ */ jsx5(Palette, { size: 18, style: { color } }) }) }),
+          /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button3, { type: "button", size: "icon", variant: "outline", className: iconBtn, "aria-label": t4("annotator.color"), children: /* @__PURE__ */ jsx5(Palette, { size: 18, style: { color } }) }) }),
           /* @__PURE__ */ jsx5(PopoverContent, { className: "w-auto p-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
             /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-4 gap-2", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
-                "aria-label": `Color ${c}`,
+                "aria-label": t4("annotator.color_swatch_aria", { color: c }),
                 onClick: () => setColor(c),
                 className: cn(
                   "h-7 w-7 rounded-full border border-gray-300",
@@ -1717,7 +1782,7 @@ function ImageAnnotator({
               c
             )) }),
             /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 text-sm", children: [
-              /* @__PURE__ */ jsx5("span", { className: "text-gray-600", children: "Custom" }),
+              /* @__PURE__ */ jsx5("span", { className: "text-gray-600", children: t4("annotator.custom_color") }),
               /* @__PURE__ */ jsx5(
                 "input",
                 {
@@ -1730,18 +1795,15 @@ function ImageAnnotator({
             ] })
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsx5(TooltipContent, { children: "Color" })
+        /* @__PURE__ */ jsx5(TooltipContent, { children: t4("annotator.color") })
       ] }),
       /* @__PURE__ */ jsxs4(Tooltip, { children: [
         /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Popover, { children: [
-          /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button3, { type: "button", size: "icon", variant: "outline", className: iconBtn, "aria-label": "Stroke width", children: /* @__PURE__ */ jsx5(SlidersHorizontal, { size: 18 }) }) }),
+          /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button3, { type: "button", size: "icon", variant: "outline", className: iconBtn, "aria-label": t4("annotator.stroke_width"), children: /* @__PURE__ */ jsx5(SlidersHorizontal, { size: 18 }) }) }),
           /* @__PURE__ */ jsx5(PopoverContent, { className: "w-56 p-4", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [
-              /* @__PURE__ */ jsx5("span", { children: "Size" }),
-              /* @__PURE__ */ jsxs4("span", { className: "font-medium text-gray-900", children: [
-                width,
-                "px"
-              ] })
+              /* @__PURE__ */ jsx5("span", { children: t4("annotator.size") }),
+              /* @__PURE__ */ jsx5("span", { className: "font-medium text-gray-900", children: t4("annotator.width_px", { width: String(width) }) })
             ] }),
             /* @__PURE__ */ jsx5(
               Slider2,
@@ -1751,7 +1813,7 @@ function ImageAnnotator({
                 step: 1,
                 value: [width],
                 onValueChange: ([v]) => setWidth(v),
-                "aria-label": "Stroke width"
+                "aria-label": t4("annotator.stroke_width")
               }
             ),
             /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx5(
@@ -1763,7 +1825,7 @@ function ImageAnnotator({
             ) })
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsx5(TooltipContent, { children: "Stroke width" })
+        /* @__PURE__ */ jsx5(TooltipContent, { children: t4("annotator.stroke_width") })
       ] }),
       /* @__PURE__ */ jsx5("span", { className: "mx-1 h-6 w-px self-center bg-gray-300", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs4(Tooltip, { children: [
@@ -1774,13 +1836,13 @@ function ImageAnnotator({
             size: "icon",
             variant: "outline",
             className: iconBtn,
-            "aria-label": "Undo",
+            "aria-label": t4("annotator.undo"),
             disabled: shapes.length === 0 && !editing,
             onClick: handleUndo,
             children: /* @__PURE__ */ jsx5(Undo2, { size: 18 })
           }
         ) }),
-        /* @__PURE__ */ jsx5(TooltipContent, { children: "Undo" })
+        /* @__PURE__ */ jsx5(TooltipContent, { children: t4("annotator.undo") })
       ] }),
       /* @__PURE__ */ jsxs4(Tooltip, { children: [
         /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
@@ -1790,13 +1852,13 @@ function ImageAnnotator({
             size: "icon",
             variant: "outline",
             className: iconBtn,
-            "aria-label": "Redo",
+            "aria-label": t4("annotator.redo"),
             disabled: redoStack.length === 0,
             onClick: handleRedo,
             children: /* @__PURE__ */ jsx5(Redo2, { size: 18 })
           }
         ) }),
-        /* @__PURE__ */ jsx5(TooltipContent, { children: "Redo" })
+        /* @__PURE__ */ jsx5(TooltipContent, { children: t4("annotator.redo") })
       ] }),
       /* @__PURE__ */ jsxs4(Tooltip, { children: [
         /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
@@ -1806,13 +1868,13 @@ function ImageAnnotator({
             size: "icon",
             variant: "outline",
             className: iconBtn,
-            "aria-label": "Clear",
+            "aria-label": t4("annotator.clear"),
             disabled: shapes.length === 0 && !editing,
             onClick: handleClear,
             children: /* @__PURE__ */ jsx5(Trash2, { size: 18 })
           }
         ) }),
-        /* @__PURE__ */ jsx5(TooltipContent, { children: "Clear all" })
+        /* @__PURE__ */ jsx5(TooltipContent, { children: t4("annotator.clear_all_tooltip") })
       ] }),
       onSave && /* @__PURE__ */ jsxs4(Tooltip, { children: [
         /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
@@ -1828,7 +1890,7 @@ function ImageAnnotator({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx5(TooltipContent, { children: "Flatten image + markup to PNG" })
+        /* @__PURE__ */ jsx5(TooltipContent, { children: t4("annotator.save_tooltip") })
       ] })
     ] }),
     /* @__PURE__ */ jsx5(
@@ -1877,7 +1939,7 @@ function ImageAnnotator({
                   cancelEditing();
                 }
               },
-              placeholder: "Type\u2026",
+              placeholder: t4("annotator.text_placeholder"),
               className: "absolute resize-none rounded border border-dashed border-gray-400 bg-white/90 p-1 leading-tight shadow-sm outline-none",
               style: {
                 left: editing.x + (editing.kind === "bubble" ? BUBBLE_PADDING : 0),
@@ -1911,6 +1973,10 @@ function canDecodeImage(file) {
     img.src = url;
   });
 }
+
+// src/ui/index.ts
+import { createPackageT as createPackageT6, resolvePackageLocale } from "hazo_core/i18n";
+var t5 = createPackageT5("hazo_images", en_default);
 export {
   DEFAULT_IMAGE_EDIT_CONTROLS,
   ImageAnnotator,
@@ -1923,7 +1989,10 @@ export {
   clearShapes,
   cn,
   controlValuesToOptions,
+  createPackageT6 as createPackageT,
   defaultControlValues,
+  resolvePackageLocale,
+  t5 as t,
   undoShape,
   validate_image_edit_controls
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_images",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Image processing pipeline for the hazo ecosystem — Sharp wrapper, thumbnail generation, EXIF handling, and hazo_files integration helper",
   "license": "MIT",
   "type": "module",
@@ -48,24 +48,28 @@
   },
   "dependencies": {
     "ini": "^4.1.0",
+    "react-konva": "^18.2.16 || ^19.2.5",
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "hazo_core": "^1.3.0",
-    "hazo_files": "^3.1.1",
-    "hazo_theme": "^1.0.1",
-    "hazo_ui": "^6.3.1",
+    "hazo_core": "^2.4.0",
+    "hazo_files": "^3.4.0",
+    "hazo_i18n": "^0.5.0",
+    "hazo_theme": "^1.4.0",
+    "hazo_ui": "^6.12.0",
     "konva": "^10.3.0",
     "lucide-react": "^0.553.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-konva": "^18.2.16 || ^19.2.5",
     "sharp": "^0.33.0"
   },
   "peerDependenciesMeta": {
     "hazo_files": {
       "optional": true
     },
+    "hazo_i18n": {
+      "optional": true
+    },
     "lucide-react": {
       "optional": true
     },
@@ -75,15 +79,9 @@
     "konva": {
       "optional": true
     },
-    "react": {
-      "optional": true
-    },
     "react-dom": {
       "optional": true
     },
-    "react-konva": {
-      "optional": true
-    },
     "sharp": {
       "optional": true
     },
@@ -95,7 +93,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^22.10.0",
     "@types/react": "^18.3.3",
-    "hazo_core": "^1.3.0",
+    "hazo_core": "^2.4.0",
     "jest": "^30.2.0",
     "jest-environment-node": "^30.2.0",
     "konva": "^10.3.0",