@codebards/ik-embeddable-form 0.0.2804300632-qa → 0.0.2804519247-qa
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.
- package/dist/embed.js +1 -1
- package/package.json +1 -1
package/dist/embed.js
CHANGED
|
@@ -22722,7 +22722,7 @@ ${intlTelStyles}`;
|
|
|
22722
22722
|
}
|
|
22723
22723
|
return url.toString();
|
|
22724
22724
|
}
|
|
22725
|
-
const leadMagnetStyles = "/* Scoped to the lead-magnet shadow root. `base.css` (injected alongside this file by\n mount.ts) supplies the `:host { all: initial }` reset and the compiled Tailwind\n utilities; everything visual for these three surfaces lives here.\n\n Values are transcribed from the comp attached to PDC-225 (\"Blog Lead Magnets (1).html\")\n and AC8/AC9, NOT from AC7's table. AC7 describes the earlier prototype — gradient card,\n radius 12, \"Most popular\" ribbon — which the attached HTML supersedes. See the note in\n LEAD-MAGNETS-PLAN.md before reconciling the two.\n\n Tokens are redeclared locally rather than inherited: the widget renders on WordPress\n blog pages that may not ship the design system, and `:host { all: initial }` gives us\n no cascade to fall back on. Fonts are the exception — @font-face is document-scoped and\n reaches into shadow trees, so the IK stacks resolve on ik pages and degrade to system\n elsewhere. */\n\n.ik-lm-root {\n /* ink */\n --lm-ink: #0b1b34;\n --lm-ink-soft: #3b4a63;\n --lm-muted: #66738c;\n /* brand ramp */\n --lm-brand-50: #eef6fe;\n --lm-brand-100: #d9ecfe;\n --lm-brand-200: #bcddfc;\n --lm-brand-400: #66b5f9;\n --lm-brand-500: #49a9f8;\n --lm-brand-600: #2f93ec;\n --lm-brand-700: #1f78cc;\n --lm-brand-800: #1c63a6;\n /* accents + surfaces */\n --lm-accent: #ff7a18;\n --lm-accent-soft: #fff1e6;\n --lm-success: #1a9e62;\n --lm-success-soft: #e8f6ee;\n --lm-danger: #dc2626;\n --lm-line: #e4e9f2;\n --lm-surface-2: #f6f8fc;\n --lm-surface-3: #eef2f9;\n /* type */\n --lm-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n --lm-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;\n --lm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n\n font-family: var(--lm-sans);\n color: var(--lm-ink);\n -webkit-font-smoothing: antialiased;\n}\n\n.ik-lm-root *,\n.ik-lm-root *::before,\n.ik-lm-root *::after {\n box-sizing: border-box;\n}\n\n/* ---------- shared atoms ---------- */\n\n.ik-lm-eyebrow {\n font-family: var(--lm-mono);\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--lm-brand-700);\n margin: 0;\n}\n\n.ik-lm-tile {\n display: grid;\n place-items: center;\n flex: none;\n border-radius: 10px;\n width: 32px;\n height: 32px;\n background: var(--lm-brand-50);\n color: var(--lm-brand-700);\n}\n.ik-lm-tile--lg {\n width: 42px;\n height: 42px;\n border-radius: 12px;\n}\n.ik-lm-tile--success {\n background: var(--lm-success-soft);\n color: var(--lm-success);\n}\n.ik-lm-tile--accent {\n background: var(--lm-accent-soft);\n color: var(--lm-accent);\n}\n.ik-lm-tile--onwhite {\n background: #fff;\n border: 1px solid var(--lm-brand-200);\n}\n\n.ik-lm-btn {\n display: block;\n width: 100%;\n border: 0;\n cursor: pointer;\n font-family: inherit;\n font-size: 15px;\n font-weight: 600;\n text-align: center;\n padding: 12px;\n border-radius: 12px;\n background: var(--lm-brand-500);\n color: #fff;\n transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ik-lm-btn:hover:not(:disabled) {\n background: var(--lm-brand-600);\n}\n.ik-lm-btn:disabled {\n opacity: 0.6;\n cursor: default;\n}\n/* Inline rather than a flex child: these labels wrap, and a flex arrow would park\n itself beside the whole block instead of trailing the last word. */\n.ik-lm-btn__tail {\n white-space: nowrap;\n}\n.ik-lm-btn__arrow {\n display: inline-flex;\n vertical-align: middle;\n margin-left: 8px;\n}\n\n.ik-lm-fineprint {\n font-size: 12px;\n color: var(--lm-muted);\n text-align: center;\n margin: 8px 0 0;\n}\n\n.ik-lm-error {\n font-size: 12.5px;\n color: var(--lm-danger);\n margin: 8px 0 0;\n}\n\n/* dashed upload affordance */\n.ik-lm-drop {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 13px;\n border-radius: 16px;\n border: 1px dashed var(--lm-brand-400);\n background: #fff;\n color: var(--lm-ink);\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: border-color 0.15s, background 0.15s;\n}\n.ik-lm-drop:hover {\n border-color: var(--lm-brand-500);\n background: var(--lm-brand-50);\n}\n.ik-lm-drop__label {\n display: block;\n font-size: 14px;\n font-weight: 600;\n}\n.ik-lm-drop__meta {\n display: block;\n font-family: var(--lm-mono);\n font-size: 10px;\n letter-spacing: 0.06em;\n color: var(--lm-muted);\n}\n\n/* filename chip that replaces the dashed slot once a file is chosen */\n.ik-lm-chip {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 13px;\n border-radius: 16px;\n border: 1px solid var(--lm-brand-200);\n background: var(--lm-brand-50);\n}\n.ik-lm-chip__name {\n flex: 1;\n min-width: 0;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ik-lm-chip__change {\n flex: none;\n border: 0;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n font-size: 12.5px;\n color: var(--lm-brand-700);\n text-decoration: underline;\n}\n\n/* analysis loader — shown between pressing analyse and the gate opening */\n\n.ik-lm-progress {\n margin-top: 12px;\n}\n\n.ik-lm-progress__track {\n height: 6px;\n width: 100%;\n overflow: hidden;\n border-radius: 999px;\n background: var(--lm-brand-100);\n}\n\n/* The long, heavily front-loaded ease is the point: the bar moves visibly the instant a\n step begins, then crawls toward that step's target without arriving. A call that takes\n 40s still looks like it is working, and no JS timer is needed to fake it. */\n.ik-lm-progress__fill {\n display: block;\n height: 100%;\n border-radius: 999px;\n background: linear-gradient(90deg, var(--lm-brand-500), var(--lm-brand-700));\n transition: width 18s cubic-bezier(0.06, 0.9, 0.2, 1);\n}\n\n.ik-lm-progress__steps {\n display: grid;\n gap: 7px;\n margin: 12px 0 0;\n padding: 0;\n list-style: none;\n}\n\n.ik-lm-progress__step {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12.5px;\n line-height: 1.35;\n color: var(--lm-muted);\n transition: color 0.2s ease;\n}\n.ik-lm-progress__step[data-state='active'] {\n font-weight: 600;\n color: var(--lm-ink);\n}\n.ik-lm-progress__step[data-state='done'] {\n color: var(--lm-success);\n}\n\n.ik-lm-progress__mark {\n display: grid;\n place-items: center;\n flex: none;\n width: 16px;\n height: 16px;\n}\n\n.ik-lm-progress__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: currentColor;\n opacity: 0.45;\n}\n.ik-lm-progress__step[data-state='active'] .ik-lm-progress__dot {\n opacity: 1;\n background: var(--lm-brand-600);\n animation: ik-lm-pulse 1.1s ease-in-out infinite;\n}\n\n@keyframes ik-lm-pulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.55); opacity: 0.45; }\n}\n\n/* Compact: end-of-read cards have no room for a three-line step list. */\n.ik-lm-progress__now {\n margin: 10px 0 0;\n font-size: 12.5px;\n font-weight: 600;\n color: var(--lm-ink);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ik-lm-progress__fill {\n transition: none;\n }\n .ik-lm-progress__step[data-state='active'] .ik-lm-progress__dot {\n animation: none;\n }\n}\n\n/* ---------- surface 1: rail panel (ToolCardList) ---------- */\n\n.ik-lm-panel {\n border: 1px solid var(--lm-line);\n border-radius: 20px;\n background: #fff;\n box-shadow: 0 1px 2px rgba(11, 27, 52, 0.06), 0 10px 24px rgba(11, 27, 52, 0.05);\n overflow: hidden;\n}\n.ik-lm-panel__head {\n padding: 18px 20px 14px;\n border-bottom: 1px solid var(--lm-line);\n background-image: radial-gradient(var(--lm-brand-100) 1px, transparent 1px);\n background-size: 22px 22px;\n}\n.ik-lm-panel__title {\n font-family: var(--lm-display);\n font-weight: 700;\n font-size: 19px;\n line-height: 1.25;\n margin: 6px 0 0;\n}\n\n.ik-lm-feature {\n padding: 18px 20px;\n border-bottom: 1px solid var(--lm-line);\n background: var(--lm-brand-50);\n}\n/* Either shape can be the panel's last section now that any tool can be the open one. */\n.ik-lm-feature:last-child {\n border-bottom: 0;\n}\n.ik-lm-feature__top {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n}\n.ik-lm-feature__name {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n}\n.ik-lm-feature__meta {\n font-family: var(--lm-mono);\n font-size: 10px;\n letter-spacing: 0.06em;\n color: var(--lm-brand-800);\n margin: 0;\n}\n.ik-lm-feature__desc {\n font-size: 13px;\n line-height: 1.55;\n color: var(--lm-ink-soft);\n margin: 0 0 12px;\n}\n\n/* compact rows for the non-featured tools */\n.ik-lm-row {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 20px;\n border: 0;\n border-bottom: 1px solid var(--lm-line);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: background 0.15s;\n}\n.ik-lm-row:last-child {\n border-bottom: 0;\n}\n.ik-lm-row:hover {\n background: var(--lm-surface-3);\n}\n.ik-lm-row__body {\n flex: 1;\n min-width: 0;\n}\n.ik-lm-row__name {\n display: block;\n font-size: 15px;\n font-weight: 600;\n color: var(--lm-ink);\n}\n.ik-lm-row__sub {\n display: block;\n font-size: 12.5px;\n color: var(--lm-muted);\n}\n.ik-lm-row__arrow {\n flex: none;\n color: var(--lm-brand-700);\n display: inline-flex;\n}\n\n/* ---------- surface 2: mid-article banner (ToolBanner) ---------- */\n\n.ik-lm-banner {\n border: 1px solid var(--lm-brand-200);\n border-radius: 20px;\n background: var(--lm-brand-50);\n padding: 24px;\n display: flex;\n align-items: center;\n gap: 24px;\n flex-wrap: wrap;\n}\n.ik-lm-banner__left {\n flex: 1 1 300px;\n min-width: 0;\n}\n.ik-lm-banner__head {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n.ik-lm-banner__title {\n font-family: var(--lm-display);\n font-weight: 700;\n font-size: 19px;\n line-height: 1.25;\n margin: 0;\n}\n.ik-lm-banner__right {\n flex: 0 1 240px;\n display: grid;\n gap: 8px;\n}\n.ik-lm-checklist {\n display: grid;\n gap: 8px;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ik-lm-check {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--lm-ink-soft);\n}\n.ik-lm-check__mark {\n color: var(--lm-success);\n display: inline-flex;\n flex: none;\n}\n\n/* ---------- surface 3: end-of-read grid (ToolGrid) ---------- */\n\n.ik-lm-grid-section {\n padding: 32px;\n border-radius: 20px;\n border: 1px solid var(--lm-line);\n background: var(--lm-surface-2);\n}\n.ik-lm-grid-section__title {\n font-family: var(--lm-display);\n font-weight: 800;\n letter-spacing: -0.02em;\n font-size: 30px;\n line-height: 1.2;\n margin: 10px 0 8px;\n}\n.ik-lm-grid-section__sub {\n font-size: 15px;\n color: var(--lm-ink-soft);\n margin: 0 0 24px;\n}\n.ik-lm-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n gap: 16px;\n}\n.ik-lm-gcard {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: #fff;\n border: 1px solid var(--lm-line);\n border-radius: 20px;\n padding: 22px;\n transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;\n}\n.ik-lm-gcard:hover {\n border-color: var(--lm-brand-200);\n box-shadow: 0 12px 40px rgba(11, 27, 52, 0.1);\n transform: translateY(-2px);\n}\n.ik-lm-gcard__name {\n font-family: var(--lm-display);\n font-weight: 700;\n font-size: 16px;\n margin: 0;\n}\n.ik-lm-gcard__desc {\n font-size: 13px;\n line-height: 1.6;\n color: var(--lm-ink-soft);\n margin: 0;\n}\n.ik-lm-gcard__foot {\n margin-top: auto;\n padding-top: 12px;\n border-top: 1px solid var(--lm-line);\n}\n.ik-lm-pill {\n position: absolute;\n top: 18px;\n right: 18px;\n font-family: var(--lm-mono);\n font-size: 9.5px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n padding: 4px 9px;\n border-radius: 999px;\n background: var(--lm-success-soft);\n color: var(--lm-success);\n}\n.ik-lm-textlink {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n border: 0;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n color: var(--lm-brand-700);\n}\n/* Breathing room once the filename chip sits directly above this control — without it the\n two rows collide and read as one block. Only in the chosen state: idle has no chip, and\n the card foot's own padding already spaces it off the divider. */\n.ik-lm-textlink--after-chip {\n margin-top: 14px;\n}\n.ik-lm-textlink__arrow {\n display: grid;\n place-items: center;\n flex: none;\n width: 26px;\n height: 26px;\n border-radius: 999px;\n background: var(--lm-brand-50);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ik-lm-gcard,\n .ik-lm-btn,\n .ik-lm-drop,\n .ik-lm-row {\n transition: none;\n }\n .ik-lm-gcard:hover {\n transform: none;\n }\n}\n";
|
|
22725
|
+
const leadMagnetStyles = "/* Scoped to the lead-magnet shadow root. `base.css` (injected alongside this file by\n mount.ts) supplies the `:host { all: initial }` reset and the compiled Tailwind\n utilities; everything visual for these three surfaces lives here.\n\n Values are transcribed from the comp attached to PDC-225 (\"Blog Lead Magnets (1).html\")\n and AC8/AC9, NOT from AC7's table. AC7 describes the earlier prototype — gradient card,\n radius 12, \"Most popular\" ribbon — which the attached HTML supersedes. See the note in\n LEAD-MAGNETS-PLAN.md before reconciling the two.\n\n Tokens are redeclared locally rather than inherited: the widget renders on WordPress\n blog pages that may not ship the design system, and `:host { all: initial }` gives us\n no cascade to fall back on. Fonts are the exception — @font-face is document-scoped and\n reaches into shadow trees, so the IK stacks resolve on ik pages and degrade to system\n elsewhere. */\n\n.ik-lm-root {\n /* ink */\n --lm-ink: #0b1b34;\n --lm-ink-soft: #3b4a63;\n --lm-muted: #66738c;\n /* brand ramp */\n --lm-brand-50: #eef6fe;\n --lm-brand-100: #d9ecfe;\n --lm-brand-200: #bcddfc;\n --lm-brand-400: #66b5f9;\n --lm-brand-500: #49a9f8;\n --lm-brand-600: #2f93ec;\n --lm-brand-700: #1f78cc;\n --lm-brand-800: #1c63a6;\n /* accents + surfaces */\n --lm-accent: #ff7a18;\n --lm-accent-soft: #fff1e6;\n --lm-success: #1a9e62;\n --lm-success-soft: #e8f6ee;\n --lm-danger: #dc2626;\n --lm-line: #e4e9f2;\n --lm-surface-2: #f6f8fc;\n --lm-surface-3: #eef2f9;\n /* type */\n --lm-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n --lm-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;\n --lm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n\n font-family: var(--lm-sans);\n color: var(--lm-ink);\n -webkit-font-smoothing: antialiased;\n}\n\n.ik-lm-root *,\n.ik-lm-root *::before,\n.ik-lm-root *::after {\n box-sizing: border-box;\n}\n\n/* ---------- shared atoms ---------- */\n\n.ik-lm-eyebrow {\n font-family: var(--lm-mono);\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--lm-brand-700);\n margin: 0;\n}\n\n.ik-lm-tile {\n display: grid;\n place-items: center;\n flex: none;\n border-radius: 10px;\n width: 32px;\n height: 32px;\n background: var(--lm-brand-50);\n color: var(--lm-brand-700);\n}\n.ik-lm-tile--lg {\n width: 42px;\n height: 42px;\n border-radius: 12px;\n}\n.ik-lm-tile--success {\n background: var(--lm-success-soft);\n color: var(--lm-success);\n}\n.ik-lm-tile--accent {\n background: var(--lm-accent-soft);\n color: var(--lm-accent);\n}\n.ik-lm-tile--onwhite {\n background: #fff;\n border: 1px solid var(--lm-brand-200);\n}\n\n.ik-lm-btn {\n display: block;\n width: 100%;\n border: 0;\n cursor: pointer;\n font-family: inherit;\n font-size: 15px;\n font-weight: 600;\n text-align: center;\n padding: 12px;\n border-radius: 12px;\n background: var(--lm-brand-500);\n color: #fff;\n transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ik-lm-btn:hover:not(:disabled) {\n background: var(--lm-brand-600);\n}\n.ik-lm-btn:disabled {\n opacity: 0.6;\n cursor: default;\n}\n/* Inline rather than a flex child: these labels wrap, and a flex arrow would park\n itself beside the whole block instead of trailing the last word. */\n.ik-lm-btn__tail {\n white-space: nowrap;\n}\n.ik-lm-btn__arrow {\n display: inline-flex;\n vertical-align: middle;\n margin-left: 8px;\n}\n\n.ik-lm-fineprint {\n font-size: 12px;\n color: var(--lm-muted);\n text-align: center;\n margin: 8px 0 0;\n}\n\n.ik-lm-error {\n font-size: 12.5px;\n color: var(--lm-danger);\n margin: 8px 0 0;\n}\n\n/* dashed upload affordance */\n.ik-lm-drop {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 13px;\n border-radius: 16px;\n border: 1px dashed var(--lm-brand-400);\n background: #fff;\n color: var(--lm-ink);\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: border-color 0.15s, background 0.15s;\n}\n.ik-lm-drop:hover {\n border-color: var(--lm-brand-500);\n background: var(--lm-brand-50);\n}\n.ik-lm-drop__label {\n display: block;\n font-size: 14px;\n font-weight: 600;\n}\n.ik-lm-drop__meta {\n display: block;\n font-family: var(--lm-mono);\n font-size: 10px;\n letter-spacing: 0.06em;\n color: var(--lm-muted);\n}\n\n/* filename chip that replaces the dashed slot once a file is chosen */\n.ik-lm-chip {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n /* Same min-content trap as the banner column — the chip appears on every surface, so it\n defends itself rather than relying on each container to remember. */\n min-width: 0;\n max-width: 100%;\n padding: 12px 13px;\n border-radius: 16px;\n border: 1px solid var(--lm-brand-200);\n background: var(--lm-brand-50);\n}\n.ik-lm-chip__name {\n flex: 1;\n min-width: 0;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ik-lm-chip__change {\n flex: none;\n border: 0;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n font-size: 12.5px;\n color: var(--lm-brand-700);\n text-decoration: underline;\n}\n\n/* analysis loader — shown between pressing analyse and the gate opening */\n\n.ik-lm-progress {\n margin-top: 12px;\n}\n\n.ik-lm-progress__track {\n height: 6px;\n width: 100%;\n overflow: hidden;\n border-radius: 999px;\n background: var(--lm-brand-100);\n}\n\n/* The long, heavily front-loaded ease is the point: the bar moves visibly the instant a\n step begins, then crawls toward that step's target without arriving. A call that takes\n 40s still looks like it is working, and no JS timer is needed to fake it. */\n.ik-lm-progress__fill {\n display: block;\n height: 100%;\n border-radius: 999px;\n background: linear-gradient(90deg, var(--lm-brand-500), var(--lm-brand-700));\n transition: width 18s cubic-bezier(0.06, 0.9, 0.2, 1);\n}\n\n.ik-lm-progress__steps {\n display: grid;\n gap: 7px;\n margin: 12px 0 0;\n padding: 0;\n list-style: none;\n}\n\n.ik-lm-progress__step {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12.5px;\n line-height: 1.35;\n color: var(--lm-muted);\n transition: color 0.2s ease;\n}\n.ik-lm-progress__step[data-state='active'] {\n font-weight: 600;\n color: var(--lm-ink);\n}\n.ik-lm-progress__step[data-state='done'] {\n color: var(--lm-success);\n}\n\n.ik-lm-progress__mark {\n display: grid;\n place-items: center;\n flex: none;\n width: 16px;\n height: 16px;\n}\n\n.ik-lm-progress__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: currentColor;\n opacity: 0.45;\n}\n.ik-lm-progress__step[data-state='active'] .ik-lm-progress__dot {\n opacity: 1;\n background: var(--lm-brand-600);\n animation: ik-lm-pulse 1.1s ease-in-out infinite;\n}\n\n@keyframes ik-lm-pulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.55); opacity: 0.45; }\n}\n\n/* Compact: end-of-read cards have no room for a three-line step list. */\n.ik-lm-progress__now {\n margin: 10px 0 0;\n font-size: 12.5px;\n font-weight: 600;\n color: var(--lm-ink);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ik-lm-progress__fill {\n transition: none;\n }\n .ik-lm-progress__step[data-state='active'] .ik-lm-progress__dot {\n animation: none;\n }\n}\n\n/* ---------- surface 1: rail panel (ToolCardList) ---------- */\n\n.ik-lm-panel {\n border: 1px solid var(--lm-line);\n border-radius: 20px;\n background: #fff;\n box-shadow: 0 1px 2px rgba(11, 27, 52, 0.06), 0 10px 24px rgba(11, 27, 52, 0.05);\n overflow: hidden;\n}\n.ik-lm-panel__head {\n padding: 18px 20px 14px;\n border-bottom: 1px solid var(--lm-line);\n background-image: radial-gradient(var(--lm-brand-100) 1px, transparent 1px);\n background-size: 22px 22px;\n}\n.ik-lm-panel__title {\n font-family: var(--lm-display);\n font-weight: 700;\n font-size: 19px;\n line-height: 1.25;\n margin: 6px 0 0;\n}\n\n.ik-lm-feature {\n padding: 18px 20px;\n border-bottom: 1px solid var(--lm-line);\n background: var(--lm-brand-50);\n}\n/* Either shape can be the panel's last section now that any tool can be the open one. */\n.ik-lm-feature:last-child {\n border-bottom: 0;\n}\n.ik-lm-feature__top {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n}\n.ik-lm-feature__name {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n}\n.ik-lm-feature__meta {\n font-family: var(--lm-mono);\n font-size: 10px;\n letter-spacing: 0.06em;\n color: var(--lm-brand-800);\n margin: 0;\n}\n.ik-lm-feature__desc {\n font-size: 13px;\n line-height: 1.55;\n color: var(--lm-ink-soft);\n margin: 0 0 12px;\n}\n\n/* compact rows for the non-featured tools */\n.ik-lm-row {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 20px;\n border: 0;\n border-bottom: 1px solid var(--lm-line);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: background 0.15s;\n}\n.ik-lm-row:last-child {\n border-bottom: 0;\n}\n.ik-lm-row:hover {\n background: var(--lm-surface-3);\n}\n.ik-lm-row__body {\n flex: 1;\n min-width: 0;\n}\n.ik-lm-row__name {\n display: block;\n font-size: 15px;\n font-weight: 600;\n color: var(--lm-ink);\n}\n.ik-lm-row__sub {\n display: block;\n font-size: 12.5px;\n color: var(--lm-muted);\n}\n.ik-lm-row__arrow {\n flex: none;\n color: var(--lm-brand-700);\n display: inline-flex;\n}\n\n/* ---------- surface 2: mid-article banner (ToolBanner) ---------- */\n\n.ik-lm-banner {\n border: 1px solid var(--lm-brand-200);\n border-radius: 20px;\n background: var(--lm-brand-50);\n padding: 24px;\n display: flex;\n align-items: center;\n gap: 24px;\n flex-wrap: wrap;\n}\n.ik-lm-banner__left {\n flex: 1 1 300px;\n min-width: 0;\n}\n.ik-lm-banner__head {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n.ik-lm-banner__title {\n font-family: var(--lm-display);\n font-weight: 700;\n font-size: 19px;\n line-height: 1.25;\n margin: 0;\n}\n.ik-lm-banner__right {\n flex: 0 1 240px;\n /* Both needed, and for the same reason: a flex item's automatic minimum size and a grid\n item's `auto` minimum are the *content's* min-content width, and the filename chip is\n `white-space: nowrap`. Without these a long filename widens this column past the card\n instead of ellipsizing inside it. */\n min-width: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: 8px;\n}\n.ik-lm-checklist {\n display: grid;\n gap: 8px;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ik-lm-check {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--lm-ink-soft);\n}\n.ik-lm-check__mark {\n color: var(--lm-success);\n display: inline-flex;\n flex: none;\n}\n\n/* ---------- surface 3: end-of-read grid (ToolGrid) ---------- */\n\n.ik-lm-grid-section {\n padding: 32px;\n border-radius: 20px;\n border: 1px solid var(--lm-line);\n background: var(--lm-surface-2);\n}\n.ik-lm-grid-section__title {\n font-family: var(--lm-display);\n font-weight: 800;\n letter-spacing: -0.02em;\n font-size: 30px;\n line-height: 1.2;\n margin: 10px 0 8px;\n}\n.ik-lm-grid-section__sub {\n font-size: 15px;\n color: var(--lm-ink-soft);\n margin: 0 0 24px;\n}\n.ik-lm-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n gap: 16px;\n}\n.ik-lm-gcard {\n position: relative;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: #fff;\n border: 1px solid var(--lm-line);\n border-radius: 20px;\n padding: 22px;\n transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;\n}\n.ik-lm-gcard:hover {\n border-color: var(--lm-brand-200);\n box-shadow: 0 12px 40px rgba(11, 27, 52, 0.1);\n transform: translateY(-2px);\n}\n.ik-lm-gcard__name {\n font-family: var(--lm-display);\n font-weight: 700;\n font-size: 16px;\n margin: 0;\n}\n.ik-lm-gcard__desc {\n font-size: 13px;\n line-height: 1.6;\n color: var(--lm-ink-soft);\n margin: 0;\n}\n.ik-lm-gcard__foot {\n margin-top: auto;\n padding-top: 12px;\n border-top: 1px solid var(--lm-line);\n}\n.ik-lm-pill {\n position: absolute;\n top: 18px;\n right: 18px;\n font-family: var(--lm-mono);\n font-size: 9.5px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n padding: 4px 9px;\n border-radius: 999px;\n background: var(--lm-success-soft);\n color: var(--lm-success);\n}\n.ik-lm-textlink {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n border: 0;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n color: var(--lm-brand-700);\n}\n/* Breathing room once the filename chip sits directly above this control — without it the\n two rows collide and read as one block. Only in the chosen state: idle has no chip, and\n the card foot's own padding already spaces it off the divider. */\n.ik-lm-textlink--after-chip {\n margin-top: 14px;\n}\n.ik-lm-textlink__arrow {\n display: grid;\n place-items: center;\n flex: none;\n width: 26px;\n height: 26px;\n border-radius: 999px;\n background: var(--lm-brand-50);\n}\n\n/* ---------- narrow viewports ---------- */\n\n/* The banner is a two-column comp; below this the left column's 300px basis can no longer\n sit beside the upload slot, so it wraps. Once wrapped, the right column must take the\n full row — its 240px basis would otherwise leave the CTA stranded at two-thirds width. */\n@media (max-width: 560px) {\n .ik-lm-banner {\n padding: 18px;\n gap: 16px;\n }\n .ik-lm-banner__left,\n .ik-lm-banner__right {\n flex: 1 1 100%;\n }\n .ik-lm-banner__title {\n font-size: 17px;\n }\n .ik-lm-chip,\n .ik-lm-drop {\n padding: 11px;\n gap: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ik-lm-gcard,\n .ik-lm-btn,\n .ik-lm-drop,\n .ik-lm-row {\n transition: none;\n }\n .ik-lm-gcard:hover {\n transform: none;\n }\n}\n";
|
|
22726
22726
|
const instances = /* @__PURE__ */ new Map();
|
|
22727
22727
|
function ensureInstance(container) {
|
|
22728
22728
|
const existing = instances.get(container);
|
package/package.json
CHANGED