@mdbase-dev/ui 0.1.0-beta.117

package/css/motion.css

@@ -0,0 +1,198 @@
+/* Animations for the platform mark. Base mark styling lives in brand.css. */
+
+/* Bootstrap: trace once in reading order, then continue as bounded I/O. */
+.mdbase-motion-bootstrap .mdbase-mark-segment {
+  --mdbase-trace-delay: 0ms;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  vector-effect: non-scaling-stroke;
+  animation: mdbase-trace-ink 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--mdbase-trace-delay) 1 both;
+}
+
+.mdbase-motion-bootstrap .mdbase-mark-accent {
+  stroke: var(--color-accent);
+  animation-name: mdbase-trace-accent;
+}
+
+.mdbase-motion-bootstrap .mdbase-mark-segment-2 { --mdbase-trace-delay: 35ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-3 { --mdbase-trace-delay: 70ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-4 { --mdbase-trace-delay: 125ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-5 { --mdbase-trace-delay: 165ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-6 { --mdbase-trace-delay: 220ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-7 { --mdbase-trace-delay: 260ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-8 { --mdbase-trace-delay: 315ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-9 { --mdbase-trace-delay: 350ms; }
+.mdbase-motion-bootstrap .mdbase-mark-segment-10 { --mdbase-trace-delay: 385ms; }
+
+.mdbase-motion-bootstrap .mdbase-mark-fence {
+  animation: mdbase-hide-original-fence 1ms linear 1.12s 1 forwards;
+}
+
+.mdbase-motion-bootstrap .mdbase-mark-conveyor-track {
+  animation:
+    mdbase-show-conveyor 1ms linear 1.12s 1 forwards,
+    mdbase-gap-conveyor 900ms linear 1.12s infinite;
+}
+
+@keyframes mdbase-trace-ink {
+  0% {
+    fill: transparent;
+    opacity: 0;
+    stroke-dashoffset: 1;
+    stroke-opacity: 1;
+  }
+  10% { opacity: 1; }
+  54% {
+    fill: transparent;
+    opacity: 1;
+    stroke-dashoffset: 0;
+    stroke-opacity: 1;
+  }
+  72%,
+  100% {
+    fill: currentColor;
+    opacity: 1;
+    stroke-dashoffset: 0;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes mdbase-trace-accent {
+  0% {
+    fill: transparent;
+    opacity: 0;
+    stroke-dashoffset: 1;
+    stroke-opacity: 1;
+  }
+  10% { opacity: 1; }
+  54% {
+    fill: transparent;
+    opacity: 1;
+    stroke-dashoffset: 0;
+    stroke-opacity: 1;
+  }
+  72%,
+  100% {
+    fill: var(--color-accent);
+    opacity: 1;
+    stroke-dashoffset: 0;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes mdbase-hide-original-fence {
+  to { opacity: 0; }
+}
+
+@keyframes mdbase-show-conveyor {
+  to { opacity: 1; }
+}
+
+/* Unfold: the frontmatter boundary opens once to reveal its fields. */
+.mdbase-motion-unfold .mdbase-mark-fence-top {
+  animation: mdbase-unfold-top 760ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
+}
+
+.mdbase-motion-unfold .mdbase-mark-fence-bottom {
+  animation: mdbase-unfold-bottom 760ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
+}
+
+.mdbase-motion-unfold .mdbase-mark-row {
+  animation: mdbase-unfold-row 760ms cubic-bezier(0.16, 1, 0.3, 1) 70ms 1 both;
+}
+
+@keyframes mdbase-unfold-top {
+  from { transform: translateY(27px) scaleX(0.62); }
+  to { transform: translateY(0) scaleX(1); }
+}
+
+@keyframes mdbase-unfold-bottom {
+  from { transform: translateY(-27px) scaleX(0.62); }
+  to { transform: translateY(0) scaleX(1); }
+}
+
+@keyframes mdbase-unfold-row {
+  from { opacity: 0; transform: scaleX(0.45); }
+  to { opacity: 1; transform: scaleX(1); }
+}
+
+/* Rebalance: two fixed-width rows change structure in opposite directions. */
+.mdbase-motion-rebalance .mdbase-mark-segment-4,
+.mdbase-motion-rebalance .mdbase-mark-segment-6 {
+  transform-origin: left center;
+}
+
+.mdbase-motion-rebalance .mdbase-mark-segment-5,
+.mdbase-motion-rebalance .mdbase-mark-segment-7 {
+  transform-origin: right center;
+}
+
+.mdbase-motion-rebalance .mdbase-mark-segment-4 {
+  animation: mdbase-rebalance-top-key 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+}
+
+.mdbase-motion-rebalance .mdbase-mark-segment-5 {
+  animation: mdbase-rebalance-top-value 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+}
+
+.mdbase-motion-rebalance .mdbase-mark-segment-6 {
+  animation: mdbase-rebalance-bottom-key 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+}
+
+.mdbase-motion-rebalance .mdbase-mark-segment-7 {
+  animation: mdbase-rebalance-bottom-value 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+}
+
+@keyframes mdbase-rebalance-top-key {
+  0%, 15%, 100% { transform: scaleX(1); }
+  42%, 72% { transform: scaleX(2.666667); }
+}
+
+@keyframes mdbase-rebalance-top-value {
+  0%, 15%, 100% { transform: scaleX(1); }
+  42%, 72% { transform: scaleX(0.642857); }
+}
+
+@keyframes mdbase-rebalance-bottom-key {
+  0%, 15%, 100% { transform: scaleX(1); }
+  42%, 72% { transform: scaleX(0.428571); }
+}
+
+@keyframes mdbase-rebalance-bottom-value {
+  0%, 15%, 100% { transform: scaleX(1); }
+  42%, 72% { transform: scaleX(1.4); }
+}
+
+/* Conveyor: repeated fence segments travel left inside exact fence clips. */
+.mdbase-motion-conveyor .mdbase-mark-fence {
+  opacity: 0;
+}
+
+.mdbase-motion-conveyor .mdbase-mark-conveyor-track {
+  opacity: 1;
+  animation: mdbase-gap-conveyor 900ms linear infinite;
+}
+
+@keyframes mdbase-gap-conveyor {
+  from { transform: translateX(0); }
+  to { transform: translateX(-28px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mdbase-mark .mdbase-mark-segment,
+  .mdbase-mark .mdbase-mark-row,
+  .mdbase-mark .mdbase-mark-fence,
+  .mdbase-mark .mdbase-mark-conveyor-track {
+    animation: none !important;
+    filter: none !important;
+    opacity: 1;
+    stroke: none;
+    transform: none !important;
+  }
+
+  .mdbase-mark .mdbase-mark-conveyor-track {
+    opacity: 0;
+  }
+}

package/css/palette.css

@@ -0,0 +1,196 @@
+/* The command palette (./command-palette). Reader's layout in Editor's quiet frame. */
+.mdbase-command-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  display: grid;
+  justify-items: center;
+  align-items: start;
+  margin: 0;
+  padding: min(14vh, 120px) 16px 16px;
+  border: 0;
+  background: color-mix(in oklch, var(--color-scrim) 40%, transparent);
+}
+
+.mdbase-command-dismiss {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.mdbase-command-palette {
+  position: relative;
+  z-index: 1;
+  width: min(600px, 100%);
+  max-height: calc(100dvh - min(28vh, 240px) - 32px);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--control-radius);
+  background: var(--color-surface);
+  animation: mdbase-popover-in var(--motion-base) var(--ease-out);
+}
+
+.mdbase-command-search {
+  height: 52px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.mdbase-command-search svg {
+  width: 17px;
+  height: 17px;
+  color: var(--color-text-muted);
+}
+
+.mdbase-command-search input {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  color: var(--color-text);
+  background: transparent;
+  font: inherit;
+  font-size: 15px;
+}
+
+.mdbase-command-search input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.mdbase-command-results {
+  min-height: 0;
+  overflow: auto;
+  padding: 4px 6px 8px;
+  scroll-padding: 28px 0 8px;
+}
+
+.mdbase-command-group {
+  padding: 10px 10px 4px;
+  color: var(--color-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.mdbase-command-results > button {
+  width: 100%;
+  min-height: 38px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 5px 10px;
+  border: 0;
+  border-radius: var(--control-radius);
+  color: var(--color-text-soft);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mdbase-command-results > button[aria-selected="true"],
+.mdbase-command-results > button:hover {
+  color: var(--color-text);
+  background: var(--color-selected);
+}
+
+.mdbase-command-results button > span:first-child {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.mdbase-command-results strong,
+.mdbase-command-results small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mdbase-command-results strong {
+  flex: 0 1 auto;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.mdbase-command-results small {
+  flex: 1 1 auto;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.mdbase-command-results kbd,
+.mdbase-command-footer kbd {
+  padding: 1px 5px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--control-radius);
+  color: var(--color-text-muted);
+  font: 10px/1.2 var(--mono);
+}
+
+.mdbase-command-footer kbd {
+  margin-right: 2px;
+}
+
+.mdbase-command-alternate {
+  color: var(--color-text-muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.mdbase-command-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  padding: 8px 14px;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+
+.mdbase-command-empty {
+  padding: 28px;
+  color: var(--color-text-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+@media (max-width: 680px) {
+  .mdbase-command-backdrop {
+    padding: 56px 8px 8px;
+  }
+
+  .mdbase-command-palette {
+    max-height: calc(100dvh - 64px);
+  }
+
+  .mdbase-command-results button > span:first-child {
+    display: grid;
+    gap: 1px;
+  }
+
+  .mdbase-command-footer {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mdbase-command-palette {
+    animation: none;
+  }
+}

package/css/screens.css

@@ -0,0 +1,155 @@
+/* Opening a collection: the wordmark, held still, over one quiet line. */
+.mdbase-opening {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: var(--color-canvas);
+}
+
+.mdbase-opening-message {
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  color: var(--color-text-soft);
+  text-align: center;
+}
+
+.mdbase-opening-message p,
+.mdbase-opening-message small {
+  display: block;
+  margin: 0;
+}
+
+.mdbase-opening-message p {
+  max-width: 44ch;
+  font-size: 13px;
+}
+
+.mdbase-opening-message small {
+  margin-top: 4px;
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+
+.mdbase-opening[data-loading-state="failed"] .mdbase-opening-message p {
+  color: var(--color-danger);
+}
+
+/* Before a collection is open. */
+.mdbase-connect-screen {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+  background: var(--color-canvas);
+}
+
+.mdbase-connect-screen section {
+  width: min(100%, 520px);
+  margin-top: -4vh;
+}
+
+.mdbase-connect-screen h1 {
+  margin: 44px 0 22px;
+  color: var(--color-text);
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 0.98;
+  letter-spacing: -0.045em;
+}
+
+.mdbase-connect-lead {
+  max-width: 34ch;
+  margin: 0;
+  color: var(--color-text-soft);
+  font-size: 17px;
+  line-height: 1.55;
+}
+
+.mdbase-connect-status {
+  margin: 14px 0 0;
+  color: var(--color-text-muted);
+  font-size: 13px;
+}
+
+/* The one strong action on the screen. */
+.mdbase-connect-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 18px;
+  height: 42px;
+  margin-top: 24px;
+  padding: 0 14px 0 16px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--control-radius);
+  color: var(--color-text);
+  background: var(--color-surface);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color var(--motion-quick) ease, background var(--motion-quick) ease;
+}
+
+.mdbase-connect-action:hover:not(:disabled) {
+  border-color: var(--color-accent);
+  background: var(--color-surface-subtle);
+}
+
+.mdbase-connect-action:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.mdbase-connect-action svg {
+  width: 15px;
+  height: 15px;
+}
+
+.mdbase-connect-footnote {
+  max-width: 47ch;
+  margin: 18px 0 0;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.mdbase-connect-error {
+  margin: 18px 0 0;
+  color: var(--color-danger);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.mdbase-connect-detail {
+  margin-top: 10px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.mdbase-connect-detail code {
+  display: block;
+  margin-top: 6px;
+  font-family: var(--mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 760px) {
+  .mdbase-connect-screen {
+    place-items: start;
+    padding: max(34px, env(safe-area-inset-top)) 24px 32px;
+  }
+
+  .mdbase-connect-screen section {
+    margin-top: 8vh;
+  }
+
+  .mdbase-connect-screen h1 {
+    margin-top: 48px;
+    font-size: 43px;
+  }
+}

package/css/tokens.css

@@ -0,0 +1,141 @@
+/*
+ * mdbase semantic roles. Components consume roles rather than palette values so
+ * both themes keep the same hierarchy. Short aliases (`--ink`, `--muted`, ...) are
+ * app-local and must map onto these roles.
+ */
+:root {
+  color-scheme: light;
+  --color-canvas: oklch(99.5% 0.002 255);
+  --color-surface: oklch(99.5% 0.002 255);
+  --color-surface-subtle: oklch(97.8% 0.003 255);
+  --color-text: oklch(21% 0.018 255);
+  --color-text-soft: oklch(50% 0.014 255);
+  --color-text-muted: oklch(54% 0.01 255);
+  --color-text-faint: oklch(70% 0.009 255);
+  --color-border: oklch(92% 0.006 255);
+  --color-border-strong: oklch(82% 0.008 255);
+  --color-selected: oklch(96.8% 0.004 255);
+  --color-accent: oklch(47% 0.1 238);
+  --color-accent-strong: oklch(41% 0.1 238);
+  --color-accent-soft: oklch(93.5% 0.035 238);
+  --color-on-accent: oklch(98% 0.004 245);
+  --color-success: oklch(44% 0.085 153);
+  --color-danger: oklch(50% 0.11 28);
+  --color-danger-soft: oklch(97% 0.018 28);
+  --color-warning: oklch(60% 0.09 75);
+  --color-warning-border: oklch(83% 0.055 82);
+  --color-warning-surface: oklch(98% 0.018 86);
+  --color-warning-text: oklch(43% 0.055 69);
+  --color-warning-strong: oklch(36% 0.052 67);
+  --color-editor-text: oklch(28% 0.014 255);
+  --color-placeholder: oklch(78% 0.007 255);
+  --color-skeleton: var(--color-border);
+  --color-shadow: oklch(20% 0.02 255 / 0.06);
+  --color-scrim: oklch(21% 0.018 255 / 0.14);
+  --scrollbar-thumb-rest: oklch(51% 0.014 255 / 0.07);
+  --scrollbar-thumb: oklch(51% 0.014 255 / 0.22);
+  --scrollbar-thumb-hover: oklch(42% 0.016 255 / 0.4);
+  --syntax-comment: oklch(58% 0.012 255);
+  --syntax-keyword: oklch(42% 0.09 294);
+  --syntax-string: oklch(39% 0.075 153);
+  --syntax-number: oklch(43% 0.1 45);
+  --syntax-link: oklch(43% 0.1 238);
+  --syntax-heading: var(--color-text);
+  --app-editor: #005c88;
+  --app-reader: #a4467f;
+  --app-writer: #d55e00;
+  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  /* Motion: popovers and small entrances are quick and ease out; a settled
+     confirmation holds, then fades away (see controls.css). */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-quick: 150ms;
+  --motion-base: 180ms;
+  --motion-settle: 2.4s;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --color-canvas: oklch(17.5% 0.012 255);
+  --color-surface: oklch(19.5% 0.012 255);
+  --color-surface-subtle: oklch(22.5% 0.012 255);
+  --color-text: oklch(92% 0.008 255);
+  --color-text-soft: oklch(70% 0.012 255);
+  --color-text-muted: oklch(62% 0.011 255);
+  --color-text-faint: oklch(56% 0.011 255);
+  --color-border: oklch(29% 0.012 255);
+  --color-border-strong: oklch(39% 0.012 255);
+  --color-selected: oklch(23.5% 0.012 255);
+  --color-accent: oklch(73% 0.105 238);
+  --color-accent-strong: oklch(65% 0.105 238);
+  --color-accent-soft: oklch(31% 0.045 238);
+  --color-on-accent: oklch(17% 0.012 255);
+  --color-success: oklch(72% 0.09 153);
+  --color-danger: oklch(72% 0.115 28);
+  --color-danger-soft: oklch(25% 0.03 28);
+  --color-warning: oklch(78% 0.09 75);
+  --color-warning-border: oklch(48% 0.06 82);
+  --color-warning-surface: oklch(25% 0.026 82);
+  --color-warning-text: oklch(78% 0.07 82);
+  --color-warning-strong: oklch(86% 0.065 82);
+  --color-editor-text: oklch(88% 0.009 255);
+  --color-placeholder: oklch(56% 0.01 255);
+  --color-skeleton: oklch(25% 0.012 255);
+  --color-shadow: oklch(5% 0.01 255 / 0.22);
+  --color-scrim: oklch(5% 0.01 255 / 0.46);
+  --scrollbar-thumb-rest: oklch(72% 0.012 255 / 0.06);
+  --scrollbar-thumb: oklch(72% 0.012 255 / 0.2);
+  --scrollbar-thumb-hover: oklch(78% 0.012 255 / 0.38);
+  --syntax-comment: oklch(62% 0.012 255);
+  --syntax-keyword: oklch(76% 0.09 294);
+  --syntax-string: oklch(75% 0.08 153);
+  --syntax-number: oklch(78% 0.1 65);
+  --syntax-link: oklch(77% 0.1 238);
+  --app-editor: #63b1e2;
+  --app-reader: #e08cc0;
+  --app-writer: #f58d4a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-canvas: oklch(17.5% 0.012 255);
+    --color-surface: oklch(19.5% 0.012 255);
+    --color-surface-subtle: oklch(22.5% 0.012 255);
+    --color-text: oklch(92% 0.008 255);
+    --color-text-soft: oklch(70% 0.012 255);
+    --color-text-muted: oklch(62% 0.011 255);
+    --color-text-faint: oklch(56% 0.011 255);
+    --color-border: oklch(29% 0.012 255);
+    --color-border-strong: oklch(39% 0.012 255);
+    --color-selected: oklch(23.5% 0.012 255);
+    --color-accent: oklch(73% 0.105 238);
+    --color-accent-strong: oklch(65% 0.105 238);
+    --color-accent-soft: oklch(31% 0.045 238);
+    --color-on-accent: oklch(17% 0.012 255);
+    --color-success: oklch(72% 0.09 153);
+    --color-danger: oklch(72% 0.115 28);
+    --color-danger-soft: oklch(25% 0.03 28);
+    --color-warning: oklch(78% 0.09 75);
+    --color-warning-border: oklch(48% 0.06 82);
+    --color-warning-surface: oklch(25% 0.026 82);
+    --color-warning-text: oklch(78% 0.07 82);
+    --color-warning-strong: oklch(86% 0.065 82);
+    --color-editor-text: oklch(88% 0.009 255);
+    --color-placeholder: oklch(56% 0.01 255);
+    --color-skeleton: oklch(25% 0.012 255);
+    --color-shadow: oklch(5% 0.01 255 / 0.22);
+    --color-scrim: oklch(5% 0.01 255 / 0.46);
+    --scrollbar-thumb-rest: oklch(72% 0.012 255 / 0.06);
+    --scrollbar-thumb: oklch(72% 0.012 255 / 0.2);
+    --scrollbar-thumb-hover: oklch(78% 0.012 255 / 0.38);
+    --syntax-comment: oklch(62% 0.012 255);
+    --syntax-keyword: oklch(76% 0.09 294);
+    --syntax-string: oklch(75% 0.08 153);
+    --syntax-number: oklch(78% 0.1 65);
+    --syntax-link: oklch(77% 0.1 238);
+    --app-editor: #63b1e2;
+    --app-reader: #e08cc0;
+    --app-writer: #f58d4a;
+  }
+}

package/dist/AppSwitcher.d.ts

@@ -0,0 +1,13 @@
+import { type JSX } from "react";
+import { type MdbaseAppId } from "./apps.js";
+import { type MdbaseMarkMotion } from "./brand.js";
+/**
+ * The product wordmark as a menu for opening the current collection in the other mdbase apps.
+ * Each opens in a new tab so the current app stays where it is.
+ */
+export declare function AppSwitcher({ current, urls, motion }: {
+    readonly current: MdbaseAppId;
+    /** Lab and local builds, for example `{ writer: import.meta.env.VITE_MDBASE_WRITER_URL }`. */
+    readonly urls?: Partial<Record<MdbaseAppId, string | undefined>>;
+    readonly motion?: MdbaseMarkMotion | undefined;
+}): JSX.Element;