@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1

package/src/core/components/ui/image/image.md

@@ -10,31 +10,31 @@ With no `rounded`, corners are square. Boolean `rounded` uses the theme token `-
   <template>
     <div class="grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs">
       <div>
-        <sonic-image ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">default</p>
       </div>
       <div>
-        <sonic-image rounded="sm" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image rounded="sm" ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">sm</p>
       </div>
       <div>
-        <sonic-image rounded ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image rounded ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">rounded</p>
       </div>
       <div>
-        <sonic-image rounded="md" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image rounded="md" ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">md</p>
       </div>
       <div>
-        <sonic-image rounded="lg" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image rounded="lg" ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">lg</p>
       </div>
       <div>
-        <sonic-image rounded="xl" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image rounded="xl" ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">xl</p>
       </div>
       <div>
-        <sonic-image rounded="full" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
+        <sonic-image rounded="full" ratio="1/1" src="/img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
         <p class="mt-2">full</p>
       </div>
     </div>
@@ -48,10 +48,10 @@ With no `rounded`, corners are square. Boolean `rounded` uses the theme token `-
 <sonic-code>
   <template>
     <div class="grid gap-8 grid-cols-2 items-center">
-      <sonic-image src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-      <sonic-image ratio="16/9" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-      <sonic-image ratio="1/1" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-      <sonic-image ratio="2/3" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
+      <sonic-image src="/img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
+      <sonic-image ratio="16/9" src="/img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
+      <sonic-image ratio="1/1" src="/img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
+      <sonic-image ratio="2/3" src="/img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
     </div>
   </template>
 </sonic-code>
@@ -63,8 +63,8 @@ With no `rounded`, corners are square. Boolean `rounded` uses the theme token `-
 <sonic-code>
   <template>
     <div class="grid gap-8 grid-cols-2 items-center">
-      <sonic-image ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
-      <sonic-image objectPosition="center top" ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
+      <sonic-image ratio="11/4" src="/img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
+      <sonic-image objectPosition="center top" ratio="11/4" src="/img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
     </div>
   </template>
 </sonic-code>
@@ -76,7 +76,7 @@ With no `rounded`, corners are square. Boolean `rounded` uses the theme token `-
 <sonic-code>
   <template>
     <div class="h-96 relative rounded-lg overflow-hidden">
-      <sonic-image cover src="img/concorde/plane_10.jpg" alt="Concorde fleet parked in a star"></sonic-image>
+      <sonic-image cover src="/img/concorde/plane_10.jpg" alt="Concorde fleet parked in a star"></sonic-image>
     </div>
   </template>
 </sonic-code>
@@ -99,7 +99,7 @@ Set `transition` to `fade` or `fade-scale-out`. The image stays transparent unti
           img.loading = 'eager';
           img.style.width = '8rem';
           var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
-          img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
+          img.src = '/img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
           host.appendChild(img);
         })()"
       >
@@ -117,7 +117,7 @@ Set `transition` to `fade` or `fade-scale-out`. The image stays transparent unti
           img.loading = 'eager';
           img.style.width = '8rem';
           var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
-          img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
+          img.src = '/img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
           host.appendChild(img);
         })()"
       >
@@ -145,7 +145,7 @@ Always set a meaningful `alt`. Use `alt=""` only for decorative images.
       rounded="md"
       ratio="16/9"
       alt="Crowd gathered around Concorde at night"
-      src="img/concorde/plane_07.jpg"
+      src="/img/concorde/plane_07.jpg"
     ></sonic-image>
   </template>
 </sonic-code>

package/src/core/components/ui/modal/modal.md

@@ -88,7 +88,7 @@ Set **`width`** · **`height`** · **`maxWidth`** · **`maxHeight`** with CSS le
     >
       <sonic-image
         cover
-        src="img/concorde/plane_12.jpg"
+        src="/img/concorde/plane_12.jpg"
         alt="Concorde at the gate with boarding stairs"
       ></sonic-image>
     </sonic-modal>
@@ -105,7 +105,7 @@ Set **`width`** · **`height`** · **`maxWidth`** · **`maxHeight`** with CSS le
     <sonic-modal fullscreen id="Fullscreen">
       <sonic-image
         cover
-        src="img/concorde/plane_10.jpg"
+        src="/img/concorde/plane_10.jpg"
         alt="Concorde fleet parked in a star"
       ></sonic-image>
     </sonic-modal>

package/src/core/decorators/subscriber/bind.ts

@@ -189,28 +189,23 @@ function bindImpl(
   };
 }
 
+/** @deprecated Pass a `DataProviderKey<T>` instead of a string path (typed, refactor-safe). */
+export function bind(
+  path: string,
+  options?: BindOptions,
+): (target: unknown, propertyKey: string) => void;
 /**
- * Bidirectional binding to a publisher path. Subscribes to changes and optionally reflects writes back.
- * Accepts either a string path (legacy) or DataProviderKey&lt;T&gt; for type-safe binding.
- * Supports dynamic paths: use placeholders like "users.${userIndex}" in the path or DataProviderKey.
+ * Bidirectional binding to a publisher path: subscribes to changes and, with
+ * `reflect: true`, writes local assignments back. For one direction only, use
+ * `@subscribe` (read) or `@publish` (write).
+ * Supports dynamic paths: use placeholders like "users.${userIndex}" in the DataProviderKey.
  *
  * @example
- * // String path (legacy):
- * @bind("demoData.firstName")
- * @state()
- * firstName = "";
- *
- * @example
- * // DataProviderKey with type validation:
  * const dataKey = new DataProviderKey<Data>("data");
  * @bind(dataKey.count, { reflect: true })
  * @state()
  * count: number = 0;
  */
-export function bind(
-  path: string,
-  options?: BindOptions,
-): (target: unknown, propertyKey: string) => void;
 export function bind<T, U = any>(
   key: DataProviderKey<T, U>,
   options?: BindOptions,

package/src/core/decorators/subscriber/subscribe.ts

@@ -2,31 +2,37 @@ import type {
   DataProviderKey,
   DataProviderKeyHost,
 } from "../../utils/dataProviderKey";
+import type { Frozen } from "../../utils/deepReadonly";
 import { bind } from "./bind";
 
 /**
- * Read-only subscription to a publisher path via DataProviderKey<T>. No reflect.
- * The decorated property is typed as `T` (or optional / `| null` / `| undefined` for Lit / TS 5).
- * Supports dynamic paths: use placeholders like "users.${userIndex}" in the DataProviderKey.
+ * Read-only subscription to a publisher path via `DataProviderKey<T>`. No reflect.
+ * The decorated property **must** be typed {@link Frozen}`<T>` (runtime = owned
+ * frozen store ref). Primitives: `Frozen<number>` ≡ `number`.
+ * Use `@publish` / `@bind({ reflect: true })` to write.
  *
  * @example
- * const dataKey = new DataProviderKey<Data>("data");
  * @subscribe(dataKey.count)
- * @state()
  * count: number;
  *
- * // Dynamic path:
+ * @subscribe(dataKey.cities)
+ * cities?: Frozen<City[]>;
+ *
  * @subscribe(new DataProviderKey<User>("users.${userIndex}"))
- * user: User | null;
+ * user: Frozen<User> | null;
  */
 export function subscribe<T, U = any>(
   key: DataProviderKey<T, U>,
 ): <K extends string>(
-  target: DataProviderKeyHost<U> & { [P in K]?: T | null | undefined },
+  target: DataProviderKeyHost<U> & {
+    [P in K]?: Frozen<T> | null | undefined;
+  },
   propertyKey: K,
 ) => void {
   return bind(key) as <K extends string>(
-    target: DataProviderKeyHost<U> & { [P in K]?: T | null | undefined },
+    target: DataProviderKeyHost<U> & {
+      [P in K]?: Frozen<T> | null | undefined;
+    },
     propertyKey: K,
   ) => void;
 }

package/src/core/decorators/subscriber/subscribe.type-test.ts

@@ -1,32 +1,41 @@
 /**
- * Type tests for subscribe — ensures property type must match DataProviderKey<T>.
+ * Type tests for subscribe — property must be Frozen<T>.
  * Excluded from build. To verify: temporarily remove from exclude and run build.
- * Expected: InvalidUsage and InvalidUsage2 should produce type errors.
+ * Expected: InvalidUsage* should produce type errors.
  */
 import { DataProviderKey } from "../../utils/dataProviderKey";
+import type { Frozen } from "../../utils/deepReadonly";
 import { subscribe } from "./subscribe";
 
 type ControlStats = {
   gauge: number;
   label: string;
+  cities: { nom: string }[];
 };
 
 const statsKey = new DataProviderKey<ControlStats>("stats");
 
-// OK: gauge is number, matches DataProviderKey<number>
 class ValidUsage {
   @subscribe(statsKey.gauge)
   gauge = 0;
 }
 
-// Should error: gauge should be number, not string
+class ValidFrozenArray {
+  @subscribe(statsKey.cities)
+  cities?: Frozen<{ nom: string }[]>;
+}
+
 class InvalidUsage {
   @subscribe(statsKey.gauge)
   gauge: string = "";
 }
 
-// Should error: label should be string, not number
 class InvalidUsage2 {
   @subscribe(statsKey.label)
   label: number = 0;
 }
+
+class InvalidMutableArray {
+  @subscribe(statsKey.cities)
+  cities?: { nom: string }[];
+}