archik 0.6.7 → 0.6.9

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.
@@ -1,8 +1,11 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
2
- <path d="M 12 5 L 5 18" stroke="#22d3ee" stroke-width="1.6" stroke-linecap="round"/>
3
- <path d="M 12 5 L 19 18" stroke="#67e8f9" stroke-width="1.6" stroke-linecap="round"/>
4
- <path d="M 5 18 L 19 18" stroke="#f472b6" stroke-width="1.4" stroke-linecap="round" stroke-dasharray="2.5 2.5"/>
5
- <circle cx="12" cy="5" r="2.8" fill="#22d3ee"/>
6
- <circle cx="5" cy="18" r="2.8" fill="#67e8f9"/>
7
- <circle cx="19" cy="18" r="2.8" fill="#f472b6"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
2
+ <!-- Three-node "A" — left stroke (cyan), right stroke (magenta), -->
3
+ <!-- dashed cross-bar at the bottom. The dashed cross-bar is the -->
4
+ <!-- visual signature: nodes connected by dashed edges = archik. -->
5
+ <path d="M 16 6 L 6 24" stroke="#22d3ee" stroke-width="2.2" stroke-linecap="round"/>
6
+ <path d="M 16 6 L 26 24" stroke="#f472b6" stroke-width="2.2" stroke-linecap="round"/>
7
+ <path d="M 7.5 24 L 24.5 24" stroke="#67e8f9" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="2 2.5"/>
8
+ <circle cx="16" cy="6" r="3.4" fill="#22d3ee" stroke="#0c1426" stroke-width="0.6"/>
9
+ <circle cx="6" cy="24" r="3.4" fill="#67e8f9" stroke="#0c1426" stroke-width="0.6"/>
10
+ <circle cx="26" cy="24" r="3.4" fill="#f472b6" stroke="#0c1426" stroke-width="0.6"/>
8
11
  </svg>
@@ -14,8 +14,8 @@
14
14
  }
15
15
  } catch {}
16
16
  </script>
17
- <script type="module" crossorigin src="/assets/index-BcQOuu98.js"></script>
18
- <link rel="stylesheet" crossorigin href="/assets/index-B-QfxZju.css">
17
+ <script type="module" crossorigin src="/assets/index-Bz-prNFj.js"></script>
18
+ <link rel="stylesheet" crossorigin href="/assets/index--WU38v9Y.css">
19
19
  </head>
20
20
  <body>
21
21
  <div id="root"></div>
package/docs/logo.svg ADDED
@@ -0,0 +1,28 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240" height="240" fill="none" role="img" aria-label="archik">
2
+ <!-- Subtle radial glow behind the apex node so the logo has -->
3
+ <!-- presence on dark backgrounds. Hidden by the rounded rect -->
4
+ <!-- on light themes too — opacity is low. -->
5
+ <defs>
6
+ <radialGradient id="glow" cx="0.5" cy="0.32" r="0.6">
7
+ <stop offset="0%" stop-color="#22d3ee" stop-opacity="0.32"/>
8
+ <stop offset="100%" stop-color="#22d3ee" stop-opacity="0"/>
9
+ </radialGradient>
10
+ </defs>
11
+ <rect width="240" height="240" rx="48" fill="url(#glow)"/>
12
+
13
+ <!-- Three-node "A" — same DNA as the favicon, scaled up with -->
14
+ <!-- room for slightly thicker strokes and crisper node halos. -->
15
+ <g stroke-linecap="round">
16
+ <path d="M 120 56 L 56 188" stroke="#22d3ee" stroke-width="14"/>
17
+ <path d="M 120 56 L 184 188" stroke="#f472b6" stroke-width="14"/>
18
+ <path d="M 70 188 L 170 188" stroke="#67e8f9" stroke-width="11" stroke-dasharray="14 14"/>
19
+ </g>
20
+
21
+ <!-- Nodes: bright fill + thin dark stroke for crispness on -->
22
+ <!-- both light and dark backgrounds. -->
23
+ <g stroke="#0c1426" stroke-width="2">
24
+ <circle cx="120" cy="56" r="22" fill="#22d3ee"/>
25
+ <circle cx="56" cy="188" r="22" fill="#67e8f9"/>
26
+ <circle cx="184" cy="188" r="22" fill="#f472b6"/>
27
+ </g>
28
+ </svg>
@@ -0,0 +1,23 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 200" width="640" height="200" fill="none" role="img" aria-label="archik">
2
+ <!-- Logo: same three-node A, scaled to fit the 200×200 left tile. -->
3
+ <g transform="translate(20, 20)" stroke-linecap="round">
4
+ <path d="M 80 24 L 24 144" stroke="#22d3ee" stroke-width="11"/>
5
+ <path d="M 80 24 L 136 144" stroke="#f472b6" stroke-width="11"/>
6
+ <path d="M 36 144 L 124 144" stroke="#67e8f9" stroke-width="9" stroke-dasharray="11 11"/>
7
+ </g>
8
+ <g transform="translate(20, 20)" stroke="#0c1426" stroke-width="1.6">
9
+ <circle cx="80" cy="24" r="17" fill="#22d3ee"/>
10
+ <circle cx="24" cy="144" r="17" fill="#67e8f9"/>
11
+ <circle cx="136" cy="144" r="17" fill="#f472b6"/>
12
+ </g>
13
+
14
+ <!-- Wordmark: lowercase "archik", weight 700, slight letter -->
15
+ <!-- spacing for a confident technical feel. currentColor so -->
16
+ <!-- it adapts to whatever surface the SVG is dropped on. -->
17
+ <text x="220" y="128"
18
+ font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif"
19
+ font-size="120"
20
+ font-weight="700"
21
+ letter-spacing="-3"
22
+ fill="currentColor">archik</text>
23
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "archik",
3
- "version": "0.6.7",
3
+ "version": "0.6.9",
4
4
  "description": "Architecture diagrams as YAML. Live canvas in the browser, headless SVG render in CI, and an installable Claude skill so the model edits the same file you do.",
5
5
  "keywords": [
6
6
  "architecture",
@@ -15,6 +15,14 @@
15
15
  ],
16
16
  "license": "MIT",
17
17
  "author": "Bashar <welcomebachar@gmail.com>",
18
+ "homepage": "https://github.com/bacharSalleh/archik#readme",
19
+ "repository": {
20
+ "type": "git",
21
+ "url": "git+https://github.com/bacharSalleh/archik.git"
22
+ },
23
+ "bugs": {
24
+ "url": "https://github.com/bacharSalleh/archik/issues"
25
+ },
18
26
  "type": "module",
19
27
  "bin": {
20
28
  "archik": "bin/archik.js"
@@ -23,6 +31,8 @@
23
31
  "bin",
24
32
  "dist",
25
33
  "docs/hero.svg",
34
+ "docs/logo.svg",
35
+ "docs/wordmark.svg",
26
36
  ".claude/skills/archik",
27
37
  "README.md",
28
38
  "LICENSE"
@@ -1 +0,0 @@
1
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-rose-700:oklch(51.4% .222 16.935);--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--tracking-tight:-.025em;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-auto{margin-top:auto}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.flex-1{flex:1}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-pre-wrap{white-space:pre-wrap}.text-rose-700{color:var(--color-rose-700)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}@media(hover:hover){.hover\:no-underline:hover{text-decoration-line:none}}}:root,[data-theme=light]{--archik-canvas:#f8fafc;--archik-panel:#fff;--archik-surface:#f1f5f9;--archik-surface-hover:#e2e8f0;--archik-fg:#0f172a;--archik-fg-dim:#475569;--archik-fg-muted:#94a3b8;--archik-border:#e2e8f0;--archik-border-strong:#cbd5e1;--archik-accent:#2563eb;--archik-accent-bright:#3b82f6;--archik-magenta:#db2777;--archik-success:#10b981;--archik-warning:#d97706;--archik-danger:#e11d48;--archik-node-fill:#fff;--archik-node-fill-tinted:#f1f5f9;--archik-node-fill-frame:#fff;--archik-node-stroke:#0f172a;--archik-node-stroke-soft:#475569;--archik-container-border:#94a3b8;--archik-node-text:#0f172a;--archik-node-text-dim:#475569;--archik-node-caption:#64748b;--archik-node-chrome-dot:#cbd5f5;--archik-edge-filled:#0f172a;--archik-edge-open:#334155;--archik-edge-dim:#64748b;--archik-edge-async:#2563eb;--archik-grid-minor:#e2e8f0;--archik-grid-major:#cbd5e1;--archik-selected:#2563eb;--archik-selected-glow:#2563eb2e;color-scheme:light}[data-theme=dark]{--archik-canvas:#050912;--archik-panel:#0c1426;--archik-surface:#14203a;--archik-surface-hover:#1c2c4d;--archik-fg:#e6edf7;--archik-fg-dim:#8b9bb8;--archik-fg-muted:#5b6a87;--archik-border:#1d2b48;--archik-border-strong:#2c3e63;--archik-accent:#22d3ee;--archik-accent-bright:#67e8f9;--archik-magenta:#f472b6;--archik-success:#34d399;--archik-warning:#fbbf24;--archik-danger:#fb7185;--archik-node-fill:#0c1426;--archik-node-fill-tinted:#142037;--archik-node-fill-frame:#14203a;--archik-node-stroke:#2c3e63;--archik-node-stroke-soft:#1d2b48;--archik-container-border:#3a4f7a;--archik-node-text:#e6edf7;--archik-node-text-dim:#b6c2d8;--archik-node-caption:#67e8f9;--archik-node-chrome-dot:#475878;--archik-edge-filled:#cbd5e1;--archik-edge-open:#94a3b8;--archik-edge-dim:#64748b;--archik-edge-async:#67e8f9;--archik-grid-minor:#0d1830;--archik-grid-major:#182748;--archik-selected:#22d3ee;--archik-selected-glow:#22d3ee47;color-scheme:dark}html,body,#root{background:var(--archik-canvas);height:100%;color:var(--archik-fg);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,sans-serif}.archik-panel{background:var(--archik-panel);border:1px solid var(--archik-border);border-radius:8px}.archik-input{background:var(--archik-surface);color:var(--archik-fg);border:1px solid var(--archik-border);font:inherit;border-radius:4px;outline:none;padding:4px 8px;font-size:12px;transition:border-color .12s,box-shadow .12s}.archik-input:focus{border-color:var(--archik-accent);box-shadow:0 0 0 3px var(--archik-selected-glow)}.archik-btn{background:var(--archik-surface);color:var(--archik-fg);border:1px solid var(--archik-border);cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:5px 10px;font-size:12px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.archik-btn:hover{background:var(--archik-surface-hover);border-color:var(--archik-border-strong)}.archik-btn:disabled{opacity:.5;cursor:not-allowed}.archik-btn-primary{background:var(--archik-accent);border-color:var(--archik-accent);color:#050912}.archik-btn-primary:hover{background:var(--archik-accent-bright);border-color:var(--archik-accent-bright)}[data-theme=light] .archik-btn-primary{color:#fff}.archik-btn-danger{color:var(--archik-danger);border-color:var(--archik-danger);background:0 0;border-style:dashed}.archik-btn-danger:hover{background:var(--archik-danger);color:#050912;border-style:solid}.archik-pill{letter-spacing:.02em;border:1px solid #0000;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;display:inline-flex}.archik-pill--info{color:var(--archik-accent);border-color:var(--archik-border-strong);background:var(--archik-accent)}@supports (color:color-mix(in lab,red,red)){.archik-pill--info{background:color-mix(in oklab,var(--archik-accent) 8%,transparent)}}.archik-pill--success{color:var(--archik-success);background:var(--archik-success)}@supports (color:color-mix(in lab,red,red)){.archik-pill--success{background:color-mix(in oklab,var(--archik-success) 12%,transparent)}}.archik-pill--warning{color:var(--archik-warning);background:var(--archik-warning)}@supports (color:color-mix(in lab,red,red)){.archik-pill--warning{background:color-mix(in oklab,var(--archik-warning) 14%,transparent)}}.archik-pill--danger{color:var(--archik-danger);background:var(--archik-danger)}@supports (color:color-mix(in lab,red,red)){.archik-pill--danger{background:color-mix(in oklab,var(--archik-danger) 14%,transparent)}}.archik-label{letter-spacing:.12em;text-transform:uppercase;color:var(--archik-fg-muted);margin-bottom:4px;font-size:10px;display:block}.archik-mono{color:var(--archik-fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.archik-divider{border-top:1px solid var(--archik-border)}.archik-grid{background-color:var(--archik-canvas);background-image:radial-gradient(var(--archik-grid-minor) 1px,transparent 1px),radial-gradient(var(--archik-grid-major) 1px,transparent 1px);background-position:0 0,0 0;background-size:20px 20px,100px 100px}.archik-selected-glow{filter:drop-shadow(0 0 6px var(--archik-selected-glow)) drop-shadow(0 0 2px var(--archik-selected-glow));animation:1.8s ease-in-out infinite archikPulse}@keyframes archikPulse{0%,to{filter:drop-shadow(0 0 4px var(--archik-selected-glow)) drop-shadow(0 0 1px var(--archik-selected-glow))}50%{filter:drop-shadow(0 0 12px var(--archik-selected-glow)) drop-shadow(0 0 3px var(--archik-selected-glow))}}.archik-modal-overlay{z-index:50;background:var(--archik-canvas);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@supports (color:color-mix(in lab,red,red)){.archik-modal-overlay{background:color-mix(in oklab,var(--archik-canvas) 70%,transparent)}}.archik-modal-overlay{-webkit-backdrop-filter:blur(4px);animation:.14s ease-out archikFadeIn}.archik-modal{background:var(--archik-panel);border:1px solid var(--archik-border);width:360px;max-width:calc(100vw - 32px);box-shadow:0 12px 40px #00000059,0 0 0 1px var(--archik-border-strong);border-radius:8px;padding:16px;animation:.2s cubic-bezier(.2,.8,.2,1) archikModalIn}.archik-selected-outline{fill:none;stroke:var(--archik-selected);stroke-width:2px;pointer-events:none}@keyframes archikEdgeFlow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-16px}}.archik-edge-flowing{animation:1.4s linear infinite archikEdgeFlow}.archik-edge-flowing-fast{animation:.6s linear infinite archikEdgeFlow}@media(prefers-reduced-motion:reduce){.archik-edge-flowing,.archik-edge-flowing-fast{animation:none}}.archik-popover{background:var(--archik-panel);border:1px solid var(--archik-border-strong);border-radius:6px;flex-direction:column;max-height:min(80vh,600px);padding:4px;animation:.16s cubic-bezier(.2,.8,.2,1) archikModalIn;display:flex;overflow:hidden;box-shadow:0 12px 32px #00000059}.archik-menu-item{width:100%;color:var(--archik-fg);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:4px;align-items:center;gap:8px;padding:6px 10px;font-size:12px;display:flex}.archik-menu-item:hover{background:var(--archik-surface-hover)}.archik-menu-item--danger{color:var(--archik-danger)}@keyframes archikFadeIn{0%{opacity:0}to{opacity:1}}@keyframes archikModalIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}.archik-drawer-shell{flex-direction:column;min-width:0;transition:width .22s cubic-bezier(.2,.8,.2,1),opacity .2s,margin-left .22s cubic-bezier(.2,.8,.2,1);display:flex;overflow:hidden}.archik-drawer-shell--open{opacity:1;width:320px;margin-left:16px}.archik-drawer-shell--closed{opacity:0;pointer-events:none;width:0;margin-left:0}.archik-drawer-content{flex-shrink:0;width:320px;height:100%}.archik-drawer-fade{animation:.22s ease-out archikFadeIn}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}