npm - unspaghettit - Versions diffs - 0.2.0 → 0.3.0 - Mend

unspaghettit 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (270) hide show

package/src/routes/+layout.svelte CHANGED Viewed

@@ -10,6 +10,8 @@
   import { projectsStore } from "$features/projects/presentation/stores/projectsStore.svelte";
   import { builderModeStore } from "$features/builder-mode/presentation/stores/builderModeStore.svelte";
   import { enabledViews, isEnabled } from "$lib/views/enabled";
+  import { themeStore } from "$lib/theme/themeStore.svelte";
+  import { ALL_THEMES } from "$lib/theme/registry";
   import { identityStore } from "$shared/identity/identityStore.svelte";
   import { authStore } from "$shared/security/authStore.svelte";
   import {
@@ -23,6 +25,10 @@
     // tries to read identityStore.author (notably the YDocClient
     // building its WebSocket URL). Idempotent on re-mount.
     identityStore.init();
+    // Mirror the active colour theme from the <html data-theme> attribute
+    // (server default + the inline head script's localStorage override) into
+    // reactive state so the header switcher and chrome track it live.
+    themeStore.init();
     // Hydrate the optional dashboard auth token the same way. When
     // unset, every API/SSE/WS request goes out unauthenticated; the
     // first 401 from the server triggers `apiFetch`'s prompt-and-retry
@@ -73,6 +79,8 @@
   let identityMenuRef = $state<HTMLDivElement | null>(null);
   let settingsMenuOpen = $state(false);
   let settingsMenuRef = $state<HTMLDivElement | null>(null);
+  let themeMenuOpen = $state(false);
+  let themeMenuRef = $state<HTMLDivElement | null>(null);
   function handleGlobalMouseDown(event: MouseEvent) {
     const target = event.target as Node;
@@ -90,6 +98,9 @@
     ) {
       settingsMenuOpen = false;
     }
+    if (themeMenuOpen && themeMenuRef && !themeMenuRef.contains(target)) {
+      themeMenuOpen = false;
+    }
   }
   async function pickRename() {
@@ -143,13 +154,25 @@
   // only when more than one view is active — a toggle between one thing is
   // meaningless. Builder is only "active" when it's both enabled and routed to.
   const views = $derived(enabledViews());
-  const showViewSwitcher = $derived(views.length > 1);
+  // The Lyriks community edition presents a single, unswitched view, so hide
+  // the Expert/Builder switcher while that theme is active.
+  const showViewSwitcher = $derived(views.length > 1 && !themeStore.isLyriks);
   const builderActive = $derived(
     isEnabled("builder") && page.url.pathname.startsWith("/builder-mode"),
   );
   const mcpActive = $derived(page.url.pathname.startsWith("/mcp"));
-  // Dark chrome while in Builder so the header matches the dark canvas.
-  const dark = $derived(builderActive);
+  // The feature editor + graph use a wider 1600px content column than the rest
+  // of the app (max-w-7xl). Match the header container to whichever the current
+  // route uses, so the header always spans the same width as the content below.
+  const wideContent = $derived(page.url.pathname.startsWith("/features/"));
+  // The Lyriks theme paints the header with a saturated violet→fuchsia
+  // gradient (see below) and the shell with a cool canvas. Cosmetic only.
+  const lyriks = $derived(themeStore.isLyriks);
+  const themes = ALL_THEMES;
+  // Dark chrome while in Builder OR under the Lyriks gradient header, so the
+  // header's foreground (logo, icons, switcher) stays legible on a dark/vivid
+  // background. The dropdown panels keep their own white surface regardless.
+  const dark = $derived(builderActive || lyriks);
   const builderProject = $derived(
     builderActive ? builderModeStore.selectedProject : null,
   );
@@ -167,39 +190,65 @@
     if (e.key === "Escape") {
       identityMenuOpen = false;
       settingsMenuOpen = false;
+      themeMenuOpen = false;
     }
   }}
 />
 <div
-  class="flex min-h-full flex-col bg-[linear-gradient(180deg,#f0fdfa_0%,#f8fafc_220px,#f8fafc_100%)] text-ink"
+  class="flex min-h-full flex-col text-ink {lyriks
+    ? 'bg-[linear-gradient(180deg,#e6ddfa_0%,#eeeafb_220px,#eeeafb_100%)]'
+    : 'bg-[linear-gradient(180deg,#f0fdfa_0%,#f8fafc_220px,#f8fafc_100%)]'}"
 >
   <header
-    class="sticky top-0 z-30 border-b backdrop-blur transition-colors {dark
-      ? 'border-slate-800 bg-slate-950/90'
-      : 'border-slate-200 bg-white/95'}"
+    class="sticky top-0 z-30 border-b backdrop-blur transition-colors {lyriks
+      ? 'border-transparent bg-[linear-gradient(90deg,#6d28d9_0%,#a21caf_55%,#db2777_100%)]'
+      : dark
+        ? 'border-slate-800 bg-slate-950/90'
+        : 'border-slate-200 bg-white/95'}"
   >
     <div
-      class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6"
+      class="mx-auto flex h-16 items-center justify-between px-4 sm:px-6 {wideContent
+        ? 'max-w-400'
+        : 'max-w-7xl'}"
     >
       <div class="flex min-w-0 items-center gap-3">
-        <a href="/" class="flex shrink-0 items-center gap-2">
+        <a href="/" class="flex shrink-0 items-center gap-2.5">
           <img
-            src="/unspaghettit_logo.png"
-            alt="Unspaghettit"
-            class="h-12 w-auto"
+            src={lyriks ? "/lyriks_logo.svg" : "/unspaghettit_logo.png"}
+            alt={lyriks ? "Lyriks" : "Unspaghettit"}
+            class={lyriks ? "h-9 w-9 shrink-0" : "h-12 w-auto"}
           />
-          <span
-            class="relative hidden font-brand text-3xl font-semibold leading-none sm:inline-block {dark
-              ? 'text-white'
-              : 'text-slate-950'}"
-          >
-            Unspaghettit
+          {#if lyriks}
+            <!-- Clean stacked lockup: wordmark with an aligned uppercase
+                 edition label below (the old absolute subtitle overflowed
+                 because "community edition" is wider than "Lyriks"). -->
+            <span class="hidden flex-col items-start leading-none sm:flex">
+              <span
+                class="font-brand text-2xl font-bold tracking-tight {dark
+                  ? 'text-white'
+                  : 'text-slate-950'}">Lyriks.io</span
+              >
+              <span
+                class="mt-1 pl-px text-[9px] font-semibold uppercase tracking-[0.18em] {dark
+                  ? 'text-white/75'
+                  : 'text-slate-500'}">Community Edition</span
+              >
+            </span>
+          {:else}
             <span
-              class="font-grotesk absolute right-0 -bottom-2 text-[10px] font-medium tracking-wide text-slate-500"
-              >by Lyriks.io</span
+              class="relative hidden font-brand text-3xl font-semibold leading-none sm:inline-block {dark
+                ? 'text-white'
+                : 'text-slate-950'}"
             >
-          </span>
+              Unspaghettit
+              <span
+                class="font-grotesk absolute right-0 -bottom-2 text-[10px] font-medium tracking-wide {dark
+                  ? 'text-white/70'
+                  : 'text-slate-500'}">by Lyriks.io</span
+              >
+            </span>
+          {/if}
         </a>
         {#if showViewSwitcher}
           <div
@@ -287,6 +336,105 @@
         </div>
       {/if}
       <div class="flex shrink-0 items-center gap-1.5">
+        <div bind:this={themeMenuRef} class="relative">
+          <button
+            type="button"
+            onclick={() => {
+              themeMenuOpen = !themeMenuOpen;
+              settingsMenuOpen = false;
+              identityMenuOpen = false;
+            }}
+            aria-haspopup="menu"
+            aria-expanded={themeMenuOpen}
+            aria-label="Switch dashboard theme"
+            title="Switch theme"
+            class="grid h-9 w-9 place-items-center rounded-md transition {themeMenuOpen
+              ? lyriks
+                ? 'bg-white/30 text-white'
+                : dark
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-slate-900 text-white'
+              : lyriks
+                ? 'bg-white/15 text-white hover:bg-white/25'
+                : dark
+                  ? 'text-slate-300 hover:bg-white/10 hover:text-white'
+                  : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}"
+          >
+            <!-- Swatch / palette glyph: overlapping colour discs. -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-5 w-5"
+              aria-hidden="true"
+            >
+              <circle cx="13.5" cy="6.5" r="2.5" />
+              <circle cx="17.5" cy="10.5" r="2.5" />
+              <circle cx="8.5" cy="7.5" r="2.5" />
+              <path
+                d="M12 21a9 9 0 1 1 0-18c4.97 0 9 3.58 9 8 0 2.5-2 3.5-3.5 3.5H15a2 2 0 0 0-1.4 3.42A1.5 1.5 0 0 1 12 21z"
+              />
+            </svg>
+          </button>
+          {#if themeMenuOpen}
+            <div
+              role="menu"
+              class="absolute right-0 top-12 z-40 w-64 overflow-hidden rounded-lg border border-slate-200 bg-white p-1 shadow-lg shadow-slate-950/10"
+            >
+              <p
+                class="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400"
+              >
+                Theme
+              </p>
+              {#each themes as theme (theme.id)}
+                {@const active = themeStore.current === theme.id}
+                <button
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={active}
+                  onclick={() => {
+                    themeStore.setTheme(theme.id);
+                    themeMenuOpen = false;
+                  }}
+                  class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm {active
+                    ? 'bg-slate-100 text-slate-950'
+                    : 'text-slate-700 hover:bg-slate-50'}"
+                >
+                  <span
+                    class="h-5 w-5 shrink-0 rounded-full ring-1 ring-slate-950/10"
+                    style="background: {theme.swatch}"
+                    aria-hidden="true"
+                  ></span>
+                  <span class="min-w-0 flex-1">
+                    <span class="block font-medium">{theme.label}</span>
+                    <span class="block text-[11px] text-slate-500"
+                      >{theme.description}</span
+                    >
+                  </span>
+                  {#if active}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="h-4 w-4 shrink-0 text-brand-600"
+                      aria-hidden="true"
+                    >
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
         <div bind:this={settingsMenuRef} class="relative">
           <button
             type="button"
@@ -300,12 +448,16 @@
             title="App menu"
             class="grid h-9 w-9 place-items-center rounded-md transition {settingsMenuOpen ||
             mcpActive
-              ? dark
-                ? 'bg-slate-800 text-white'
-                : 'bg-slate-900 text-white'
-              : dark
-                ? 'text-slate-400 hover:bg-slate-800 hover:text-white'
-                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}"
+              ? lyriks
+                ? 'bg-white/30 text-white'
+                : dark
+                  ? 'bg-slate-800 text-white'
+                  : 'bg-slate-900 text-white'
+              : lyriks
+                ? 'bg-white/15 text-white hover:bg-white/25'
+                : dark
+                  ? 'text-slate-400 hover:bg-slate-800 hover:text-white'
+                  : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -399,9 +551,11 @@
           href="/tutorial"
           aria-label="Help & tutorial"
           title="Help & tutorial"
-          class="grid h-9 w-9 place-items-center rounded-md transition {dark
-            ? 'text-slate-400 hover:bg-slate-800 hover:text-white'
-            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}"
+          class="grid h-9 w-9 place-items-center rounded-md transition {lyriks
+            ? 'bg-white/15 text-white hover:bg-white/25'
+            : dark
+              ? 'text-slate-400 hover:bg-slate-800 hover:text-white'
+              : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'}"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

package/src/routes/features/[id]/graph/+page.svelte ADDED Viewed

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { asFeatureId } from '$features/behavior-model/domain/value-objects/ids';
+  import { featureStore } from '$features/behavior-model/presentation/stores/featureStore.svelte';
+  import { implementationStatusStore } from '$features/implementation-status/presentation/stores/implementationStatusStore.svelte';
+  import { projectContextStore } from '$features/projects/presentation/stores/projectContextStore.svelte';
+  import BehaviorGraph from '$features/behavior-model/presentation/components/BehaviorGraph.svelte';
+  onMount(() => {
+    const id = asFeatureId($page.params.id ?? '');
+    featureStore.load(id);
+    projectContextStore.load(id);
+    return () => {
+      featureStore.reset();
+      implementationStatusStore.reset();
+      projectContextStore.reset();
+    };
+  });
+</script>
+{#if featureStore.loading}
+  <div class="mx-auto max-w-7xl px-4 py-10 text-sm text-neutral-500">Loading...</div>
+{:else if featureStore.error}
+  <div class="mx-auto max-w-7xl px-4 py-10 text-sm text-red-600">{featureStore.error}</div>
+{:else if !featureStore.feature}
+  <div class="mx-auto max-w-7xl px-4 py-10 text-sm text-neutral-500">
+    Feature not found. <a href="/features" class="text-brand-700 underline">Back to list</a>.
+  </div>
+{:else}
+  <main class="mx-auto max-w-[1600px] px-4 py-6">
+    <BehaviorGraph feature={featureStore.feature} />
+  </main>
+{/if}

package/src/routes/projects/[id]/graph/+page.svelte ADDED Viewed

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { asFeatureId } from '$features/behavior-model/domain/value-objects/ids';
+  import BehaviorGraph from '$features/behavior-model/presentation/components/BehaviorGraph.svelte';
+  import { asProjectId } from '$features/projects/domain/value-objects/ids';
+  import { projectFeaturesStore } from '$features/projects/presentation/stores/projectFeaturesStore.svelte';
+  import { projectStore } from '$features/projects/presentation/stores/projectStore.svelte';
+  import { subscribeSyncEvents } from '$lib/client/sync/syncEvents';
+  let unsubscribeSync: (() => void) | null = null;
+  let graphDataReady = $state(false);
+  onMount(async () => {
+    const raw = $page.params.id;
+    if (!raw) return;
+    graphDataReady = false;
+    const id = asProjectId(raw);
+    await projectStore.load(id);
+    await projectFeaturesStore.loadAllSummaries();
+    if (projectStore.project) {
+      await projectFeaturesStore.load(projectStore.project.featureIds);
+    }
+    graphDataReady = true;
+    unsubscribeSync = subscribeSyncEvents(async (evt) => {
+      if (!projectStore.project) return;
+      if (evt.kind === 'project' && evt.id === String(id)) {
+        graphDataReady = false;
+        await projectFeaturesStore.syncWith(projectStore.project.featureIds);
+        graphDataReady = true;
+      } else if (evt.kind === 'feature') {
+        const ours = projectStore.project.featureIds.some((fid) => String(fid) === evt.id);
+        if (ours) {
+          await projectFeaturesStore.refetchOne(asFeatureId(evt.id));
+        } else {
+          await projectFeaturesStore.loadAllSummaries();
+        }
+      }
+    });
+  });
+  onDestroy(() => {
+    unsubscribeSync?.();
+    unsubscribeSync = null;
+    graphDataReady = false;
+    projectStore.reset();
+    projectFeaturesStore.reset();
+  });
+</script>
+<svelte:head>
+  <title>Project Graph / Unspaghettit</title>
+</svelte:head>
+{#if projectStore.loading}
+  <p class="mx-auto max-w-7xl px-4 py-10 text-sm text-neutral-500">Loading project...</p>
+{:else if projectStore.error}
+  <p class="mx-auto max-w-7xl px-4 py-10 text-sm text-red-600">{projectStore.error}</p>
+{:else if !projectStore.project}
+  <p class="mx-auto max-w-7xl px-4 py-10 text-sm text-neutral-500">
+    Project not found. <a href="/projects" class="text-brand-700 hover:underline">Back to projects</a>
+  </p>
+{:else if projectFeaturesStore.loading || !graphDataReady}
+  <p class="mx-auto max-w-7xl px-4 py-10 text-sm text-neutral-500">Loading project features...</p>
+{:else if projectFeaturesStore.error}
+  <p class="mx-auto max-w-7xl px-4 py-10 text-sm text-red-600">{projectFeaturesStore.error}</p>
+{:else if projectStore.project.featureIds.length > 0 && projectFeaturesStore.features.length === 0}
+  <div class="mx-auto max-w-7xl px-4 py-10">
+    <p class="text-sm font-medium text-slate-900">No feature snapshots loaded for this project.</p>
+    <p class="mt-2 text-sm text-slate-600">
+      The project lists {projectStore.project.featureIds.length} feature{projectStore.project.featureIds.length === 1 ? '' : 's'},
+      but the graph could not load their behavior models from the shared hub.
+    </p>
+  </div>
+{:else}
+  <main class="mx-auto max-w-[1800px] px-4 py-6">
+    <BehaviorGraph project={projectStore.project} features={projectFeaturesStore.features} />
+  </main>
+{/if}

package/src/shared/presentation/components/ProgressBar.svelte CHANGED Viewed

@@ -5,7 +5,7 @@
    * Designed to replace the "single flat colored fill" pattern that was
    * scattered across FeatureCard / MaturityPanel / FeatureHealthStrip.
    * Adds:
-   *   - tier-based color (red < 50%, amber < 80%, emerald â‰¥ 80%) when no
+   *   - tier-based color (red < 50%, amber < 80%, emerald >= 80%) when no
    *     explicit `color` is passed. The tier breakpoints match the
    *     existing scorer thresholds so the visual identity stays in step
    *     with the textual "critical / recommended" semantics.

package/src/shared/presentation/toast/SyncToast.svelte CHANGED Viewed

@@ -3,6 +3,7 @@
   import { fly, fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
   import { syncToastStore, type SyncToast } from './syncToastStore.svelte';
+  import { resolveViewLink } from './viewLinkResolver';
   onMount(() => {
     // Idempotent — starts the SSE subscription on first mount, no-ops on
@@ -89,6 +90,15 @@
     if (cleaned.length === 0) cleaned.push(toast.entityId);
     return cleaned;
   }
+  // The "View" target. Prefer the active view's own deep-link (e.g. the
+  // Builder, while it's open) so the user stays where they are; fall back to
+  // the default Expert route the toast was created with. Deletes carry no
+  // viewable target (the entity is gone).
+  function viewHref(toast: SyncToast): string | undefined {
+    if (toast.op === 'delete') return undefined;
+    return resolveViewLink(toast.kind, toast.entityId) ?? toast.href;
+  }
 </script>
 {#if syncToastStore.toasts.length > 0}
@@ -99,6 +109,7 @@
   >
     {#each syncToastStore.toasts as toast (toast.id)}
       {@const crumbs = breadcrumb(toast)}
+      {@const target = viewHref(toast)}
       <div
         class="pointer-events-auto flex items-start gap-3 rounded-lg border px-3 py-2 shadow-md shadow-slate-950/10 {kindAccent(toast.kind)}"
         in:fly={{ x: 24, duration: 180, easing: cubicOut }}
@@ -137,9 +148,9 @@
           {/if}
         </div>
         <div class="flex shrink-0 items-center gap-1">
-          {#if toast.href}
+          {#if target}
             <a
-              href={toast.href}
+              href={target}
               class="rounded-md bg-white/70 px-2 py-1 text-xs font-medium text-slate-700 hover:bg-white hover:text-brand-800"
               onclick={() => syncToastStore.dismiss(toast.id)}
             >
@@ -152,7 +163,7 @@
             onclick={() => syncToastStore.dismiss(toast.id)}
             aria-label="Dismiss"
           >
-            âœ•
+            &times;
           </button>
         </div>
       </div>

package/src/shared/presentation/toast/viewLinkResolver.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import type { SyncEvent } from '$lib/client/sync/syncEvents';
+/**
+ * Lets the active view teach the activity-toast where its "View" button should
+ * point WITHOUT the shared toast layer importing any feature. A view (today the
+ * Builder) registers a resolver while it is mounted; the toast asks it for an
+ * in-view link to the changed entity first, and falls back to the default
+ * (Expert) route when the resolver returns null (entity not shown in that view)
+ * or no view is registered.
+ *
+ * Dependency inversion: the shared toast depends on this abstraction; the
+ * feature supplies the implementation — the same shape as the BuilderHost ports.
+ */
+export type ViewLinkResolver = (kind: SyncEvent['kind'], id: string) => string | null;
+let resolver: ViewLinkResolver | null = null;
+/**
+ * Register the active view's resolver. Returns an unregister fn; calling it
+ * only clears the slot when it still holds THIS resolver, so a remount that
+ * registers a new one before the old view's cleanup runs isn't torn down.
+ */
+export const registerViewLinkResolver = (next: ViewLinkResolver): (() => void) => {
+  resolver = next;
+  return () => {
+    if (resolver === next) resolver = null;
+  };
+};
+/** In-view link for the changed entity, or null to use the default route. */
+export const resolveViewLink = (kind: SyncEvent['kind'], id: string): string | null =>
+  resolver ? resolver(kind, id) : null;

package/static/lyriks_logo.svg ADDED Viewed

@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="lyriks-1.svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4618">
+      <stop
+         style="stop-color:#ffa101;stop-opacity:1;"
+         offset="0"
+         id="stop4614" />
+      <stop
+         style="stop-color:#ffa101;stop-opacity:0;"
+         offset="1"
+         id="stop4616" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4610">
+      <stop
+         style="stop-color:#bb46f5;stop-opacity:1;"
+         offset="0"
+         id="stop4606" />
+      <stop
+         style="stop-color:#bb46f5;stop-opacity:0;"
+         offset="1"
+         id="stop4608" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4602">
+      <stop
+         style="stop-color:#0066ff;stop-opacity:1;"
+         offset="0"
+         id="stop4598" />
+      <stop
+         style="stop-color:#0066ff;stop-opacity:0;"
+         offset="1"
+         id="stop4600" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4602"
+       id="linearGradient4604"
+       x1="433.33047"
+       y1="223.41049"
+       x2="432.65369"
+       y2="484.82812"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.26458333,0,0,0.26458333,-82.110177,-99.957753)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4610"
+       id="linearGradient4612"
+       x1="432.83047"
+       y1="323.48856"
+       x2="433.53754"
+       y2="146.35829"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.26458333,0,0,0.26458333,-82.110177,-99.957753)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4618"
+       id="linearGradient4620"
+       x1="22.477682"
+       y1="34.598564"
+       x2="21.553013"
+       y2="86.671013"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(12.832291,-41.407291)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="31.592839"
+     inkscape:cy="4.7086138"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="2560"
+     inkscape:window-height="1369"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="false"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-284.3)">
+    <g
+       transform="matrix(0.43489873,0,0,0.40888801,-9.9205419,298.38648)"
+       id="g3740">
+      <rect
+         id="rect3742-2-8"
+         width="29.185829"
+         height="7.0625973"
+         x="22.823183"
+         y="-10.439077"
+         style="fill:url(#linearGradient4620);fill-opacity:1;stroke-width:0.29681981" />
+      <path
+         style="fill:url(#linearGradient4604);fill-opacity:1;stroke-width:0.09354433"
+         d="m 22.821255,-30.364151 v -4.069178 h 9.494747 9.494751 v 4.069178 4.069178 h -9.494751 -9.494747 z"
+         id="path3785"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:url(#linearGradient4612);fill-opacity:1;stroke-width:0.09354433"
+         d="m 22.821255,-18.343704 v -4.022408 h 9.494747 9.494751 v 4.022408 4.022404 h -9.494751 -9.494747 z"
+         id="path3787"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>