@supersoniks/concorde 5.0.1 → 5.0.3

package/src/core/components/ui/toast/toast.ts

@@ -8,6 +8,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap, StyleInfo } from "lit/directives/style-map.js";
 import "@supersoniks/concorde/core/components/ui/toast/toast-item";
 import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
+import { isToastDismissed } from "@supersoniks/concorde/core/components/ui/toast/dismissed";
 import {
   Toast,
   ToastContent,
@@ -66,7 +67,7 @@ export class SonicToast extends LitElement {
         bottom: "1.25rem",
         right: "1.25rem",
         zIndex: "10000",
-        maxWidth: "64ch",
+        maxWidth: "45ch",
         flexDirection: "column-reverse",
       };
     }
@@ -215,12 +216,8 @@ export class SonicToast extends LitElement {
     };
 
     // check if the toast is dismissed
-    if (conf.dismissForever && conf.id) {
-      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      if (dismissedObj[conf.id]) {
-        return null;
-      }
+    if (conf.dismissForever && conf.id && isToastDismissed(conf.id)) {
+      return null;
     }
 
     if (toastComponent?.toasts.length) {

package/src/core/components/ui/tooltip/tooltip.ts

@@ -2,16 +2,16 @@ import { html, LitElement, css, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import {
   computeFloatingPosition,
-  FloatingAlign,
-  FloatingSide,
+  FloatingPlacement,
   getFloatingBounds,
+  parsePlacement,
   startFrameLoop,
   supportsPopover,
 } from "@supersoniks/concorde/core/utils/positioning";
 
 const tagName = "sonic-tooltip";
 
-type TooltipPlacement = FloatingSide | `${FloatingSide}-${FloatingAlign}`;
+type TooltipPlacement = FloatingPlacement;
 
 const GAP = 4;
 
@@ -102,15 +102,13 @@ export class Tooltip extends LitElement {
       return;
     }
 
-    const [side = "top", align = "center"] = (this.placement ?? "top").split(
-      "-",
-    );
+    const { side, align } = parsePlacement(this.placement, "top", "center");
 
     const { x, y } = computeFloatingPosition({
       anchor: this.getBoundingClientRect(),
       floating: bubble.getBoundingClientRect(),
-      side: side as FloatingSide,
-      align: align as FloatingAlign,
+      side,
+      align,
       gap: GAP,
       bounds: getFloatingBounds(this, GAP),
     });

package/src/core/utils/LocationHandler.ts

@@ -1,13 +1,20 @@
 import { Route } from "./route";
 
+export type AutoActiveMode =
+  | "strict"
+  | "partial"
+  | "disabled"
+  | "strict-path-only";
+
 declare type Listener = {
   location: string;
 };
-declare type ActivableLink = HTMLElement & {
+
+export type ActivableLink = HTMLElement & {
   location?: string;
   href?: Route | string;
   goBack?: Route | string | null;
-  autoActive?: "strict" | "partial" | "disabled" | "strict-path-only";
+  autoActive?: AutoActiveMode;
   setAttribute(name: string, value: string): void;
   removeAttribute(name: string): void;
 };
@@ -22,7 +29,7 @@ export default class LocationHandler {
   static listening = false;
   static prevURL: string = document.location?.href.replace(
     document.location.origin,
-    ""
+    "",
   );
   static listen() {
     if (!LocationHandler.listening) {
@@ -30,7 +37,7 @@ export default class LocationHandler {
     }
     const newURL = document.location?.href.replace(
       document.location.origin,
-      ""
+      "",
     );
     if (LocationHandler.prevURL && LocationHandler.prevURL != newURL) {
       LocationHandler.prevURL = newURL;
@@ -116,7 +123,7 @@ export default class LocationHandler {
       prevSp = sp;
     }
 
-    to = "/" + newPathName.join("/") + url.search + (url.hash ? +url.hash : "");
+    to = "/" + newPathName.join("/") + url.search + (url.hash ? url.hash : "");
     if (component.hasAttribute("pushState")) {
       history.pushState(null, "", to);
     } else if (component.hasAttribute("replaceState")) {

package/src/core/utils/dismissed.ts

@@ -0,0 +1,22 @@
+function readDismissed(storageKey: string): Record<string, boolean> {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(storageKey) || "{}");
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function isDismissed(storageKey: string, id: string | number): boolean {
+  return !!readDismissed(storageKey)[id];
+}
+
+export function markDismissed(storageKey: string, id: string | number): void {
+  const dismissed = readDismissed(storageKey);
+  dismissed[id] = true;
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(dismissed));
+  } catch {
+    // stockage indisponible (mode privé, quota)
+  }
+}

package/src/core/utils/positioning.spec.ts

@@ -3,6 +3,7 @@ import {
   computeFloatingPosition,
   FloatingBounds,
   FloatingSide,
+  parsePlacement,
 } from "./positioning";
 
 type Rect = {
@@ -178,3 +179,30 @@ describe("computeFloatingPosition", () => {
     });
   });
 });
+
+describe("parsePlacement", () => {
+  it("lit côté et alignement", () => {
+    expect(parsePlacement("left-end", "bottom", "start")).toEqual({
+      side: "left",
+      align: "end",
+    });
+  });
+
+  it("applique l'alignement par défaut quand il est absent", () => {
+    expect(parsePlacement("top", "bottom", "start")).toEqual({
+      side: "top",
+      align: "start",
+    });
+  });
+
+  it("retombe sur les défauts pour une valeur inconnue", () => {
+    expect(parsePlacement("foo-bar", "top", "center")).toEqual({
+      side: "top",
+      align: "center",
+    });
+    expect(parsePlacement(undefined, "top", "center")).toEqual({
+      side: "top",
+      align: "center",
+    });
+  });
+});

package/src/core/utils/positioning.ts

@@ -2,6 +2,25 @@ import HTML, { SearchableDomElement } from "./HTML";
 
 export type FloatingSide = "top" | "right" | "bottom" | "left";
 export type FloatingAlign = "start" | "center" | "end";
+export type FloatingPlacement =
+  | FloatingSide
+  | `${FloatingSide}-${FloatingAlign}`;
+
+const SIDES: readonly string[] = ["top", "right", "bottom", "left"];
+const ALIGNS: readonly string[] = ["start", "center", "end"];
+
+/** Découpe `"côté-alignement"` ; une valeur inconnue retombe sur le défaut. */
+export function parsePlacement(
+  placement: string | undefined,
+  defaultSide: FloatingSide,
+  defaultAlign: FloatingAlign,
+): { side: FloatingSide; align: FloatingAlign } {
+  const [side, align] = (placement ?? "").split("-");
+  return {
+    side: SIDES.includes(side) ? (side as FloatingSide) : defaultSide,
+    align: ALIGNS.includes(align) ? (align as FloatingAlign) : defaultAlign,
+  };
+}
 
 export type FloatingBounds = {
   minX: number;

package/src/docs/_getting-started/concorde-outside.md

@@ -1,8 +1,8 @@
 # Installation
 
-<sonic-alert status="success" label="Recommended — use the starter" size="xl" background>
-  <p><strong>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a>.</strong></p>
-  <p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="#docs/_getting-started/ai-agents.md/ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
+<sonic-alert status="info" label="Recommended — use the starter" background>
+<p>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a></p>
+<p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="#docs/_getting-started/ai-agents.md/ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
 </sonic-alert>
 
 ## Starter

package/src/docs/code.ts

@@ -36,6 +36,8 @@ export class DocsCode extends LitElement {
       pre {
         font-size: 13px !important;
         padding-right: 5rem !important;
+        border: 1px solid var(--sc-base-200);
+        border-radius: var(--sc-rounded);
       }
       .custom-scroll {
         overflow: auto !important;
@@ -239,7 +241,7 @@ export class DocsCode extends LitElement {
     return html`
       <div
         class="relative ${this.language === "markup"
-          ? "border border-neutral-100 p-4 rounded-md"
+          ? "rounded-md border border-neutral-200 bg-neutral-50/80 dark:border-neutral-700/80 dark:bg-neutral-900/40 p-4"
           : ""}"
       >
         ${this.language === "markup" && !this.noOutput