@aiaiai-pt/design-system 0.28.0 → 0.30.0

package/components/ActionFormRenderer.svelte

@@ -130,10 +130,22 @@
   let fileUploads = $state<Record<string, Array<{ key: string; name: string }>>>({});
   let fileBusy = $state<Record<string, boolean>>({});
   let fileError = $state<Record<string, string>>({});
-  // Platform caps mirror the public upload surface (3 × 5MB, web image types).
+  // Platform caps mirror the public upload surface. The per-action tier
+  // (allowed content types + max bytes) is DATA on the action's
+  // `submission_contract.attachments`; the render projects it onto the `file`
+  // parameter (`accept` / `max_bytes`). When a parameter carries no tier we
+  // fall back to the conservative web-image defaults (3 × 5MB, image types).
   const FILE_MAX_COUNT = 3;
-  const FILE_MAX_BYTES = 5 * 1024 * 1024;
-  const FILE_ACCEPT = "image/jpeg,image/png,image/webp";
+  const DEFAULT_FILE_MAX_BYTES = 5 * 1024 * 1024;
+  const DEFAULT_FILE_ACCEPT = "image/jpeg,image/png,image/webp";
+  function fileAccept(parameter: Entity): string {
+    const accept = (parameter as Record<string, unknown>).accept;
+    return typeof accept === "string" && accept.trim() ? accept : DEFAULT_FILE_ACCEPT;
+  }
+  function fileMaxBytes(parameter: Entity): number {
+    const max = Number((parameter as Record<string, unknown>).max_bytes);
+    return Number.isFinite(max) && max > 0 ? max : DEFAULT_FILE_MAX_BYTES;
+  }
 
   // Submit state (apply seam). Only meaningful in submit modes with an onApply.
   let submitting = $state(false);
@@ -491,13 +503,16 @@
       {/each}
       {#if (fileUploads[key] ?? []).length < FILE_MAX_COUNT}
         <FileUpload
-          accept={FILE_ACCEPT}
-          maxSize={FILE_MAX_BYTES}
+          accept={fileAccept(parameter)}
+          maxSize={fileMaxBytes(parameter)}
           multiple
           disabled={!uploadFile || fileBusy[key]}
           onfiles={(files: File[]) => handleFiles(key, files)}
           onreject={() => {
-            fileError = { ...fileError, [key]: "JPEG, PNG or WebP up to 5MB" };
+            fileError = {
+              ...fileError,
+              [key]: `File type not allowed or too large (max ${Math.round(fileMaxBytes(parameter) / (1024 * 1024))}MB).`,
+            };
           }}
         />
       {/if}

package/components/NotificationPrefs.svelte

@@ -30,7 +30,7 @@
 -->
 <script module>
   /**
-   * @typedef {{ id: string, label: string, description?: string, active: boolean }} PrefItem
+   * @typedef {{ id: string, label: string, description?: string, active: boolean, group?: string }} PrefItem
    */
 </script>
 
@@ -54,30 +54,56 @@
     class: className = "",
     ...rest
   } = $props();
+
+  // Group rows by their optional `group` (order preserved). Items with no
+  // `group` fall in the leading unnamed group, which renders WITHOUT a header —
+  // so a flat `items` list (no group set) renders exactly as before
+  // (backward-compatible). A named group renders an <h3> section header above
+  // its bordered list (e.g. "Edição" / "Categoria" / "Freguesia").
+  const groups = $derived.by(() => {
+    /** @type {string[]} */
+    const order = [];
+    /** @type {Map<string, PrefItem[]>} */
+    const byGroup = new Map();
+    for (const item of items) {
+      const g = item.group ?? "";
+      if (!byGroup.has(g)) {
+        byGroup.set(g, []);
+        order.push(g);
+      }
+      byGroup.get(g)?.push(item);
+    }
+    return order.map((g) => ({ group: g, items: byGroup.get(g) ?? [] }));
+  });
 </script>
 
 <section class="notification-prefs {className}" aria-label={label} {...rest}>
   {#if items.length > 0}
-    <List variant="bordered">
-      {#each items as item (item.id)}
-        <ListItem>
-          {#snippet leading()}
-            <span class="notification-prefs-label">{item.label}</span>
-            {#if item.description}
-              <span class="notification-prefs-desc">{item.description}</span>
-            {/if}
-          {/snippet}
-          {#snippet trailing()}
-            <Toggle
-              checked={item.active}
-              disabled={busyId === item.id}
-              aria-label={item.label}
-              onchange={(next) => onToggle?.(item.id, next)}
-            />
-          {/snippet}
-        </ListItem>
-      {/each}
-    </List>
+    {#each groups as grp (grp.group)}
+      {#if grp.group}
+        <h3 class="notification-prefs-group">{grp.group}</h3>
+      {/if}
+      <List variant="bordered">
+        {#each grp.items as item (item.id)}
+          <ListItem>
+            {#snippet leading()}
+              <span class="notification-prefs-label">{item.label}</span>
+              {#if item.description}
+                <span class="notification-prefs-desc">{item.description}</span>
+              {/if}
+            {/snippet}
+            {#snippet trailing()}
+              <Toggle
+                checked={item.active}
+                disabled={busyId === item.id}
+                aria-label={item.label}
+                onchange={(next) => onToggle?.(item.id, next)}
+              />
+            {/snippet}
+          </ListItem>
+        {/each}
+      </List>
+    {/each}
   {:else}
     <p class="notification-prefs-empty">{emptyText}</p>
   {/if}
@@ -90,6 +116,18 @@
     gap: var(--space-md);
   }
 
+  .notification-prefs-group {
+    font-family: var(--type-heading-font, var(--type-body-font));
+    font-size: var(--type-body-size);
+    font-weight: 600;
+    color: var(--color-text);
+    margin: var(--space-sm) 0 calc(-1 * var(--space-xs)) 0;
+  }
+
+  .notification-prefs-group:first-child {
+    margin-top: 0;
+  }
+
   .notification-prefs-label {
     font-family: var(--type-body-font);
     font-size: var(--type-body-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",