@w5-ui/svelte 0.1.0

package/src/lib/components/UptimeTimeline.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export type UptimeStatus = 'up' | 'degraded' | 'down';
+
+  export interface UptimeSegment {
+    from: number;
+    to: number;
+    status: UptimeStatus;
+  }
+
+  export interface UptimeSeries {
+    label: string;
+    segments: UptimeSegment[];
+  }
+
+  export let series: UptimeSeries[] = [];
+  export let xLabels: string[] = [];
+  export let ariaLabel: string = 'Uptime timeline';
+
+  const VW = 400;
+  const LABEL_W = 88;
+  const PAD_R = 10;
+  const PAD_T = 6;
+  const ROW_H = 14;
+  const ROW_GAP = 8;
+  const XLBL_H = 16;
+  const LEG_H = 16;
+  const PAD_B = XLBL_H + LEG_H + 4;
+
+  const STATUS_COLOR: Record<UptimeStatus, string> = {
+    up: '#00C875',
+    degraded: '#F5A623',
+    down: '#F03E3E',
+  };
+
+  const LEGEND: { status: UptimeStatus; label: string }[] = [
+    { status: 'up', label: 'Up' },
+    { status: 'degraded', label: 'Degraded' },
+    { status: 'down', label: 'Down' },
+  ];
+
+  $: trackW = VW - LABEL_W - PAD_R;
+  $: rowsH = series.length * (ROW_H + ROW_GAP) - ROW_GAP;
+  $: totalH = PAD_T + rowsH + PAD_B;
+  $: xlblY = PAD_T + rowsH + XLBL_H;
+  $: legY = xlblY + LEG_H;
+
+  $: rows = series.map((s, si) => ({
+    label: s.label,
+    y: PAD_T + si * (ROW_H + ROW_GAP),
+    midY: PAD_T + si * (ROW_H + ROW_GAP) + ROW_H / 2 + 4,
+    segs: s.segments.map((seg) => ({
+      x: LABEL_W + seg.from * trackW,
+      w: (seg.to - seg.from) * trackW,
+      color: STATUS_COLOR[seg.status],
+    })),
+  }));
+
+  $: xlbls = xLabels.map((lbl, i) => ({
+    lbl,
+    x: LABEL_W + (xLabels.length > 1 ? i / (xLabels.length - 1) : 0) * trackW,
+    anchor: i === 0 ? 'start' : i === xLabels.length - 1 ? 'end' : 'middle',
+  }));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {totalH}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each rows as row}
+      <text x={LABEL_W - 8} y={row.midY} text-anchor="end" fill="#A4A7B5" font-size="11" font-family="inherit">
+        {row.label}
+      </text>
+      <rect x={LABEL_W} y={row.y} width={trackW} height={ROW_H} fill="rgba(255,255,255,0.04)" rx="3" />
+      {#each row.segs as seg}
+        <rect x={seg.x} y={row.y} width={seg.w} height={ROW_H} fill={seg.color} rx="2" fill-opacity="0.85" />
+      {/each}
+    {/each}
+
+    {#each xlbls as { lbl, x, anchor }}
+      <text {x} y={xlblY} text-anchor={anchor} fill="#6E7079" font-size="10" font-family="inherit">{lbl}</text>
+    {/each}
+
+    {#each LEGEND as { status, label }, i}
+      <rect x={LABEL_W + i * 80} y={legY - 8} width="12" height="8" fill={STATUS_COLOR[status]} rx="2" fill-opacity="0.85" />
+      <text x={LABEL_W + i * 80 + 16} y={legY} fill="#6E7079" font-size="10" font-family="inherit">{label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/VennDiagram.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  export interface VennSet {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+  }
+  export interface VennIntersection {
+    sets: string[];
+    value: number;
+  }
+
+  export let sets: VennSet[] = [];
+  export let intersections: VennIntersection[] = [];
+  export let height = 240;
+  export let ariaLabel = 'Venn diagram';
+
+  const PALETTE = ['#006FFF', '#00C875', '#A78BFA'];
+  const VW = 340;
+
+  function fmt(n: number): string {
+    return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+  }
+
+  $: valid = sets.length >= 2 && sets.length <= 3;
+  $: is3 = sets.length === 3;
+  $: cx = VW / 2;
+  $: cy = height / 2;
+
+  $: circles = is3
+    ? [
+        { x: cx,      y: cy - 40, r: 75 },
+        { x: cx - 65, y: cy + 50, r: 75 },
+        { x: cx + 65, y: cy + 50, r: 75 },
+      ]
+    : [
+        { x: cx - 58, y: cy, r: 85 },
+        { x: cx + 58, y: cy, r: 85 },
+      ];
+
+  $: exclusiveValues = sets.map((s) =>
+    Math.max(
+      0,
+      s.value -
+        intersections
+          .filter((i) => i.sets.includes(s.id))
+          .reduce((sum, i) => sum + i.value, 0),
+    ),
+  );
+
+  function getPt(inter: VennIntersection): { x: number; y: number } | null {
+    const idxById: Record<string, number> = {};
+    sets.forEach((s, i) => { idxById[s.id] = i; });
+    const idxs = inter.sets
+      .map((id) => idxById[id])
+      .filter((v) => v !== undefined)
+      .sort((a, b) => a - b);
+    if (!is3) return { x: cx, y: cy };
+    if (idxs.length >= 3) return { x: cx, y: cy + 18 };
+    if (idxs[0] === 0 && idxs[1] === 1) return { x: cx - 33, y: cy + 4 };
+    if (idxs[0] === 0 && idxs[1] === 2) return { x: cx + 33, y: cy + 4 };
+    if (idxs[0] === 1 && idxs[1] === 2) return { x: cx, y: cy + 50 };
+    return null;
+  }
+</script>
+
+{#if valid}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each sets as s, i}
+        {@const c = circles[i]}
+        {@const color = s.color ?? PALETTE[i % PALETTE.length]}
+        <circle cx={c.x} cy={c.y} r={c.r} fill={color} fill-opacity="0.15" stroke={color} stroke-opacity="0.55" stroke-width="1.5" />
+      {/each}
+
+      {#each sets as s, i}
+        {@const c = circles[i]}
+        {@const color = s.color ?? PALETTE[i % PALETTE.length]}
+        <text x={c.x} y={c.y - 8} fill={color} font-size="11" text-anchor="middle" font-family="inherit" font-weight="600">{s.label}</text>
+        <text x={c.x} y={c.y + 8} fill="#A4A7B5" font-size="10" text-anchor="middle" font-family="inherit">{fmt(exclusiveValues[i])}</text>
+      {/each}
+
+      {#each intersections as inter}
+        {@const pt = getPt(inter)}
+        {#if pt}
+          <text x={pt.x} y={pt.y} fill="rgba(255,255,255,0.65)" font-size="10" text-anchor="middle" font-family="inherit">{fmt(inter.value)}</text>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/ViolinPlot.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  export interface ViolinSeries {
+    label: string;
+    values: number[];
+    color?: string;
+  }
+
+  export let series: ViolinSeries[] = [];
+  export let yRange: [number, number] | undefined = undefined;
+  export let height: number = 160;
+  export let ariaLabel: string = 'Violin plot';
+
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+  const SQRT_TWO_PI = Math.sqrt(2 * Math.PI);
+  const NUM_PTS = 60;
+
+  function bw(vals: number[]): number {
+    const n = vals.length;
+    const m = vals.reduce((a, b) => a + b, 0) / n;
+    const s = Math.sqrt(vals.reduce((a, b) => a + (b - m) ** 2, 0) / n);
+    return Math.max(0.9 * s * Math.pow(n, -0.2), 0.5);
+  }
+
+  function kde(vals: number[], h: number, pts: number[]): number[] {
+    const n = vals.length;
+    const c = 1 / (n * h * SQRT_TWO_PI);
+    return pts.map(y => c * vals.reduce((acc, x) => {
+      const z = (y - x) / h;
+      return acc + Math.exp(-0.5 * z * z);
+    }, 0));
+  }
+
+  function med(vals: number[]): number {
+    const s = [...vals].sort((a, b) => a - b);
+    const m = Math.floor(s.length / 2);
+    return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+  }
+
+  const VW = 380;
+  $: VH = height;
+  const PAD_L = 28;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 20;
+
+  $: allVals = series.flatMap(s => s.values);
+  $: yMin = yRange ? yRange[0] : Math.min(...allVals);
+  $: yMax = yRange ? yRange[1] : Math.max(...allVals);
+
+  $: TRACK_W = VW - PAD_L - PAD_R;
+  $: TRACK_H = VH - PAD_T - PAD_B;
+  $: slotW = TRACK_W / series.length;
+  $: maxHalfW = slotW * 0.38;
+
+  $: evalPts = Array.from({ length: NUM_PTS }, (_, i) =>
+    yMin + (i / (NUM_PTS - 1)) * (yMax - yMin)
+  );
+
+  function ySvg(v: number): number {
+    return PAD_T + ((yMax - v) / (yMax - yMin)) * TRACK_H;
+  }
+
+  $: violins = series.map((s, si) => {
+    const h = bw(s.values);
+    const dens = kde(s.values, h, evalPts);
+    const maxD = Math.max(...dens, 1e-9);
+    const cx = PAD_L + si * slotW + slotW / 2;
+    const pts = evalPts.map((v, i) => ({ x: (dens[i] / maxD) * maxHalfW, y: ySvg(v) }));
+    const right = pts.map(p => `${(cx + p.x).toFixed(1)},${p.y.toFixed(1)}`);
+    const left = [...pts].reverse().map(p => `${(cx - p.x).toFixed(1)},${p.y.toFixed(1)}`);
+    const d = `M${cx},${ySvg(yMin)} L${right.join(' L')} L${left.join(' L')} Z`;
+    const median = med(s.values);
+    return {
+      d,
+      cx,
+      medY: ySvg(median),
+      maxHalfW,
+      color: s.color ?? COLORS[si % COLORS.length],
+      label: s.label,
+    };
+  });
+
+  $: ticks = [0, 0.25, 0.5, 0.75, 1].map(t => {
+    const v = yMin + t * (yMax - yMin);
+    return { v, y: ySvg(v) };
+  });
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {VH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each ticks as tick (tick.v)}
+      <line x1={PAD_L} y1={tick.y} x2={VW - PAD_R} y2={tick.y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      <text x={PAD_L - 3} y={tick.y + 3} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{tick.v.toFixed(0)}</text>
+    {/each}
+    {#each violins as v, si (si)}
+      <path d={v.d} fill={v.color} opacity="0.72" />
+      <line
+        x1={v.cx - v.maxHalfW * 0.45}
+        y1={v.medY}
+        x2={v.cx + v.maxHalfW * 0.45}
+        y2={v.medY}
+        stroke="#fff"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <text x={v.cx} y={VH - 5} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{v.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/VirtualList.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let items: unknown[] = [];
+  export let itemHeight: number = 48;
+  export let height: number = 400;
+  export let label: string | undefined = undefined;
+  export let overscan: number = 3;
+
+  let scrollTop = 0;
+
+  $: totalHeight = items.length * itemHeight;
+  $: firstVisible = Math.floor(scrollTop / itemHeight);
+  $: startIndex = Math.max(0, firstVisible - overscan);
+  $: endIndex = Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1);
+  $: visible = items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i }));
+</script>
+
+<div
+  role="list"
+  aria-label={label}
+  class="vl"
+  style:height="{height}px"
+  style:overflow-y="auto"
+  on:scroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
+>
+  <div style:height="{totalHeight}px" style:position="relative">
+    <div style:position="absolute" style:top="{startIndex * itemHeight}px" style:width="100%">
+      {#each visible as { item, index } (index)}
+        <div
+          role="listitem"
+          style:height="{itemHeight}px"
+          style:overflow="hidden"
+        >
+          <slot {item} {index} />
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

package/src/lib/components/WaffleChart.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  export interface WaffleSegment {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let segments: WaffleSegment[] = [];
+  export let total: number | undefined = undefined;
+  export let cols: number = 10;
+  export let rows: number = 10;
+  export let gap: number = 2;
+  export let ariaLabel: string = 'Waffle chart';
+
+  const COLORS = ['#006FFF', '#00C7A8', '#F5A623', '#FF6B6B', '#A78BFA'];
+  const VW = 280;
+  const LEGEND_H = 24;
+
+  $: sum = total ?? segments.reduce((s, seg) => s + seg.value, 0);
+  $: cellSize = (VW - gap * (cols - 1)) / cols;
+  $: gridH = rows * cellSize + gap * (rows - 1);
+  $: svgH = gridH + LEGEND_H + 6;
+  $: totalCells = cols * rows;
+
+  $: cellMap = (() => {
+    const map: number[] = new Array(totalCells).fill(-1);
+    let cursor = 0;
+    segments.forEach((seg, si) => {
+      const count = Math.round((seg.value / sum) * totalCells);
+      for (let j = 0; j < count && cursor < totalCells; j++, cursor++) {
+        map[cursor] = si;
+      }
+    });
+    return map;
+  })();
+
+  $: cells = Array.from({ length: totalCells }, (_, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const x = col * (cellSize + gap);
+    const y = row * (cellSize + gap);
+    const si = cellMap[i];
+    const fill = si >= 0 ? (segments[si].color ?? COLORS[si % COLORS.length]) : 'rgba(255,255,255,0.06)';
+    return { x, y, fill, width: cellSize, height: cellSize };
+  });
+
+  $: legendItems = segments.map((seg, si) => ({
+    color: seg.color ?? COLORS[si % COLORS.length],
+    pct: Math.round((seg.value / sum) * 100),
+    label: seg.label,
+    lx: si * (VW / segments.length),
+    ly: gridH + 8,
+  }));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {svgH}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each cells as cell}
+      <rect x={cell.x} y={cell.y} width={cell.width} height={cell.height} fill={cell.fill} rx="1" />
+    {/each}
+    {#each legendItems as item}
+      <rect x={item.lx} y={item.ly} width="8" height="8" fill={item.color} rx="1" />
+      <text x={item.lx + 11} y={item.ly + 7.5} fill="#A4A7B5" font-size="9" font-family="inherit">
+        {item.label} {item.pct}%
+      </text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/WaterfallChart.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  export interface WaterfallBar {
+    label: string;
+    value: number;
+    type?: 'start' | 'delta' | 'total';
+  }
+
+  export let bars: WaterfallBar[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Waterfall chart';
+
+  const VW = 320;
+  const PAD = { t: 12, r: 8, b: 24, l: 8 };
+  const COLOR_START = '#006FFF';
+  const COLOR_POS = '#00C875';
+  const COLOR_NEG = '#F04949';
+  const COLOR_TOTAL = '#A78BFA';
+
+  $: chartH = height - PAD.t - PAD.b;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: n = bars.length;
+  $: colW = n > 0 ? chartW / n : chartW;
+  $: gap = colW * 0.15;
+  $: barW = colW - gap * 2;
+
+  $: cumBases = (() => {
+    const result: number[] = [];
+    let acc = 0;
+    for (const b of bars) {
+      if (b.type === 'start' || b.type === 'total') {
+        result.push(0);
+        acc = b.value;
+      } else {
+        result.push(acc);
+        acc += b.value;
+      }
+    }
+    return result;
+  })();
+
+  $: tops = bars.map((b, i) => {
+    if (b.type === 'start' || b.type === 'total') return b.value;
+    return cumBases[i] + b.value;
+  });
+
+  $: allVals = [0, ...cumBases, ...tops];
+  $: minV = allVals.length ? Math.min(...allVals) : 0;
+  $: maxV = allVals.length ? Math.max(...allVals) : 1;
+  $: range = maxV - minV || 1;
+
+  function toY(v: number): number {
+    return PAD.t + (1 - (v - minV) / range) * chartH;
+  }
+
+  $: bot = PAD.t + chartH;
+
+  $: rects = bars.map((b, i) => {
+    const base = cumBases[i];
+    const top = b.type === 'start' || b.type === 'total' ? b.value : base + b.value;
+    const y0 = toY(Math.max(base, top));
+    const y1 = toY(Math.min(base, top));
+    const x = PAD.l + i * colW + gap;
+    const color = b.type === 'start' ? COLOR_START : b.type === 'total' ? COLOR_TOTAL : b.value >= 0 ? COLOR_POS : COLOR_NEG;
+    return { x: x.toFixed(1), y: y0.toFixed(1), w: barW.toFixed(1), h: Math.max(y1 - y0, 1).toFixed(1), color };
+  });
+
+  $: connectors = rects.slice(0, -1).map((r, i) => {
+    const nextX = PAD.l + (i + 1) * colW + gap;
+    return { x1: parseFloat(r.x), x2: nextX + barW + gap, y: parseFloat(r.y) };
+  });
+
+  $: labels = bars.map((b, i) => ({
+    x: (PAD.l + (i + 0.5) * colW).toFixed(1),
+    y: (bot + 10).toFixed(1),
+    label: b.label,
+  }));
+
+  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => (PAD.t + (1 - f) * chartH).toFixed(1));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as y}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each connectors as c}
+      <line x1={c.x1} y1={c.y} x2={c.x2} y2={c.y} stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="2 2" />
+    {/each}
+    {#each rects as r, i}
+      <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.color} fill-opacity="0.85" rx="2" />
+    {/each}
+    {#each labels as l}
+      <text x={l.x} y={l.y} text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit">{l.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/WordCloud.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  export interface WordCloudItem {
+    word: string;
+    weight: number;
+    color?: string;
+  }
+
+  export let items: WordCloudItem[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Word cloud';
+
+  const VW = 380;
+  const PAD = 14;
+  const MIN_FONT = 9;
+  const MAX_FONT = 28;
+  const GAP = 6;
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342', '#00C875', '#FF7BB1'];
+
+  $: sorted = [...items].sort((a, b) => b.weight - a.weight);
+  $: maxW = sorted[0]?.weight ?? 1;
+  $: minW = sorted[sorted.length - 1]?.weight ?? 0;
+  $: range = maxW - minW || 1;
+
+  $: words = sorted.map((item, i) => {
+    const t = (item.weight - minW) / range;
+    const fontSize = MIN_FONT + t * (MAX_FONT - MIN_FONT);
+    const approxW = item.word.length * fontSize * 0.56 + GAP * 2;
+    return {
+      word: item.word,
+      weight: item.weight,
+      fontSize,
+      approxW,
+      color: item.color ?? COLORS[i % COLORS.length],
+      bold: fontSize >= 16,
+    };
+  });
+
+  $: placed = (() => {
+    const usableW = VW - PAD * 2;
+    const rows: (typeof words)[] = [];
+    let row: typeof words = [];
+    let rowW = 0;
+    for (const w of words) {
+      if (rowW + w.approxW > usableW && row.length > 0) {
+        rows.push(row);
+        row = [w];
+        rowW = w.approxW;
+      } else {
+        row.push(w);
+        rowW += w.approxW;
+      }
+    }
+    if (row.length) rows.push(row);
+
+    const ROW_H = 32;
+    const totalH = rows.length * ROW_H + PAD * 2;
+    const svgH = Math.max(height, totalH);
+    const offsetY = PAD + (svgH - totalH) / 2;
+
+    return rows.flatMap((r, ri) => {
+      const rowUsed = r.reduce((s, w) => s + w.approxW, 0);
+      let x = PAD + (usableW - rowUsed) / 2;
+      const baseY = offsetY + ri * ROW_H;
+      return r.map((w) => {
+        const cx = x + w.approxW / 2;
+        x += w.approxW;
+        return { ...w, cx, cy: baseY + w.fontSize };
+      });
+    });
+  })();
+
+  $: svgH = (() => {
+    const ROW_H = 32;
+    const usableW = VW - PAD * 2;
+    let rows = 1; let rowW = 0;
+    for (const w of words) {
+      if (rowW + w.approxW > usableW && rowW > 0) { rows++; rowW = w.approxW; }
+      else rowW += w.approxW;
+    }
+    return Math.max(height, rows * ROW_H + PAD * 2);
+  })();
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {svgH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each placed as w (w.word)}
+      <text
+        x={w.cx}
+        y={w.cy}
+        text-anchor="middle"
+        fill={w.color}
+        font-size={w.fontSize}
+        font-weight={w.bold ? 600 : 400}
+        font-family="inherit"
+      >{w.word}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/icons/AlarmIcon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">export let size: number = 16;</script>
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+  <path d="m8 2 6 11H2L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+  <path d="M8 7v3M8 11.5h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>

package/src/lib/icons/BellIcon.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let size: number = 16;
+</script>
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+  <path d="M4 6.5a4 4 0 0 1 8 0V9l1.2 2H2.8L4 9V6.5ZM6.5 12.5a1.5 1.5 0 0 0 3 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/src/lib/icons/CaretIcon.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  let className = '';
+  export { className as class };
+  export let size: number = 14;
+</script>
+<svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false" class={className}>
+  <path d="M5.5 8 10 12.5 14.5 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/src/lib/icons/ClientsIcon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">export let size: number = 16;</script>
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+  <circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.5" />
+  <path d="M3 13c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>

package/src/lib/icons/CloseIcon.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let size: number = 14;
+</script>
+<svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
+  <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>

package/src/lib/icons/DashboardIcon.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">export let size: number = 16;</script>
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+  <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+  <rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+  <rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+  <rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+</svg>

package/src/lib/icons/DevicesIcon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">export let size: number = 16;</script>
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+  <rect x="2.5" y="3.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+  <line x1="2.5" y1="6.5" x2="13.5" y2="6.5" stroke="currentColor" stroke-width="1.5" />
+</svg>

package/src/lib/icons/DownloadIcon.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let size: number = 14;
+</script>
+<svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
+  <path d="M7 1.5v7m0 0L4.5 6m2.5 2.5L9.5 6M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/src/lib/icons/HelpIcon.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let size: number = 16;
+</script>
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+  <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" />
+  <path d="M6.4 6.2c.2-1 1-1.5 1.9-1.5 1.1 0 1.9.7 1.9 1.7s-.6 1.4-1.4 1.8c-.6.3-1 .6-1 1.2v.3M8 11.6h0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>