@inkra/react 0.3.0 → 0.5.0

package/dist/styles/dockable-panel.css

@@ -0,0 +1,110 @@
+.inkra-dockable-panel-workspace {
+  contain: layout paint;
+  isolation: isolate;
+  min-block-size: 20rem;
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.inkra-dockable-panel {
+  --inkra-dockable-panel-x: 0px;
+  --inkra-dockable-panel-y: 0px;
+  block-size: auto;
+  color: var(--inkra-ink);
+  display: grid;
+  grid-template-rows: auto 8px minmax(0, 1fr);
+  inline-size: min(22rem, calc(100% - var(--inkra-space-4)));
+  left: 0;
+  max-block-size: calc(100% - var(--inkra-space-4));
+  min-inline-size: min(16rem, calc(100% - var(--inkra-space-4)));
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  transform: translate3d(var(--inkra-dockable-panel-x), var(--inkra-dockable-panel-y), 0);
+}
+
+.inkra-dockable-panel[data-collapsed="true"] { grid-template-rows: auto; }
+
+.inkra-dockable-panel[data-active="true"] {
+  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--inkra-ink) 16%, transparent));
+}
+
+.inkra-dockable-panel__header {
+  align-items: stretch;
+  display: flex;
+  min-block-size: var(--inkra-touch-target);
+  min-inline-size: 0;
+}
+
+.inkra-dockable-panel__handle {
+  align-items: center;
+  cursor: grab;
+  display: flex;
+  flex: 1 1 auto;
+  min-block-size: var(--inkra-touch-target);
+  min-inline-size: 0;
+  outline: none;
+  padding: var(--inkra-space-2) var(--inkra-space-3);
+  touch-action: none;
+  user-select: none;
+}
+
+.inkra-dockable-panel__handle:active,
+.inkra-dockable-panel[data-dragging="true"] .inkra-dockable-panel__handle { cursor: grabbing; }
+
+.inkra-dockable-panel__handle:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+
+.inkra-dockable-panel__title {
+  font-weight: 400;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.inkra-dockable-panel__actions {
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--inkra-space-1);
+  padding: var(--inkra-space-1);
+}
+
+.inkra-dockable-panel__divider {
+  block-size: 8px;
+  inline-size: 100%;
+}
+
+.inkra-dockable-panel[data-collapsed="true"] .inkra-dockable-panel__divider { display: none; }
+
+.inkra-dockable-panel__body {
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-3);
+}
+
+.inkra-dockable-panel .inkra-visually-hidden {
+  block-size: 1px !important;
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  inline-size: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-dockable-panel { transition: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-dockable-panel { border: 1px solid CanvasText; }
+  .inkra-dockable-panel[data-active="true"] { outline: 2px solid Highlight; filter: none; }
+  .inkra-dockable-panel__handle:focus-visible { outline-color: Highlight; }
+}

package/dist/styles/drawer.css

@@ -0,0 +1,133 @@
+.inkra-drawer__backdrop {
+  animation: inkra-drawer-backdrop-in var(--inkra-motion-normal) var(--inkra-ease);
+  background: var(--inkra-overlay);
+  inset: 0;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+.inkra-drawer__backdrop[data-state="closed"] { animation: inkra-drawer-backdrop-out var(--inkra-motion-normal) var(--inkra-ease); }
+
+.inkra-drawer__content {
+  box-sizing: border-box;
+  container-name: inkra-drawer;
+  container-type: inline-size;
+  max-height: 100dvh;
+  max-width: 100vw;
+  outline: 0;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+.inkra-drawer__content:focus-visible { outline: 0; }
+.inkra-drawer__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+
+  display: block !important;
+  inset: var(--inkra-focus-width);
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  z-index: 3;
+}
+.inkra-drawer__content:focus-visible > .inkra-drawer__focus-ring { opacity: 1; }
+.inkra-drawer__content[data-direction="left"],
+.inkra-drawer__content[data-direction="right"] { block-size: 100dvh; inset-block: 0; inline-size: min(var(--inkra-drawer-size), 100vw); }
+.inkra-drawer__content[data-direction="left"] { animation: inkra-drawer-left-in var(--inkra-motion-slow) var(--inkra-ease); left: 0; }
+.inkra-drawer__content[data-direction="right"] { animation: inkra-drawer-right-in var(--inkra-motion-slow) var(--inkra-ease); right: 0; }
+.inkra-drawer__content[data-direction="top"],
+.inkra-drawer__content[data-direction="bottom"] { block-size: min(var(--inkra-drawer-size), 100dvh); inline-size: 100vw; inset-inline: 0; }
+.inkra-drawer__content[data-direction="top"] { animation: inkra-drawer-top-in var(--inkra-motion-slow) var(--inkra-ease); inset-block-start: 0; }
+.inkra-drawer__content[data-direction="bottom"] { animation: inkra-drawer-bottom-in var(--inkra-motion-slow) var(--inkra-ease); inset-block-end: 0; }
+.inkra-drawer__content[data-state="closed"][data-direction="left"] { animation: inkra-drawer-left-out var(--inkra-motion-slow) var(--inkra-ease); }
+.inkra-drawer__content[data-state="closed"][data-direction="right"] { animation: inkra-drawer-right-out var(--inkra-motion-slow) var(--inkra-ease); }
+.inkra-drawer__content[data-state="closed"][data-direction="top"] { animation: inkra-drawer-top-out var(--inkra-motion-slow) var(--inkra-ease); }
+.inkra-drawer__content[data-state="closed"][data-direction="bottom"] { animation: inkra-drawer-bottom-out var(--inkra-motion-slow) var(--inkra-ease); }
+
+.inkra-drawer__backdrop[data-state],
+.inkra-drawer__content[data-state][data-direction] { animation-fill-mode: both; }
+.inkra-drawer__content[data-state="closed"] { pointer-events: none; }
+
+.inkra-drawer__surface,
+.inkra-drawer__layout { block-size: 100%; display: flex; flex-direction: column; min-height: 0; inline-size: 100%; }
+.inkra-drawer__surface { color: var(--inkra-ink); position: relative; }
+.inkra-drawer__layout { overflow: hidden; }
+.inkra-drawer__edge { pointer-events: none; position: absolute; z-index: 1; }
+.inkra-drawer__content[data-direction="left"] .inkra-drawer__edge { block-size: 100%; inline-size: 8px; inset-block: 0; right: -4px; }
+.inkra-drawer__content[data-direction="right"] .inkra-drawer__edge { block-size: 100%; inline-size: 8px; inset-block: 0; left: -4px; }
+.inkra-drawer__content[data-direction="top"] .inkra-drawer__edge { block-size: 8px; inline-size: 100%; inset-block-end: -4px; inset-inline: 0; }
+.inkra-drawer__content[data-direction="bottom"] .inkra-drawer__edge { block-size: 8px; inline-size: 100%; inset-block-start: -4px; inset-inline: 0; }
+
+.inkra-drawer__header,
+.inkra-drawer__body,
+.inkra-drawer__footer { box-sizing: border-box; gap: var(--inkra-space-3); min-width: 0; padding: var(--inkra-space-5); position: relative; }
+.inkra-drawer__header,
+.inkra-drawer__footer { flex: 0 1 auto; min-height: 0; }
+.inkra-drawer__header {
+  align-items: center;
+  display: flex;
+  max-block-size: 50%;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+.inkra-drawer__heading { display: grid; flex: 1 1 auto; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
+.inkra-drawer__header-actions { align-items: center; display: flex; flex: none; flex-wrap: wrap; gap: var(--inkra-space-2); justify-content: flex-end; max-inline-size: 100%; min-width: 0; overflow: auto; overscroll-behavior: contain; }
+.inkra-drawer__close-button { flex: none; }
+.inkra-drawer__body { flex: 1 1 0; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-5); scrollbar-gutter: stable; }
+.inkra-drawer__footer { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-end; max-block-size: 40%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: auto; }
+.inkra-drawer__footer[data-align="start"] { justify-content: flex-start; }
+.inkra-drawer__footer[data-align="center"] { justify-content: center; }
+.inkra-drawer__footer > .inkra-button { max-width: 100%; }
+
+.inkra-drawer__title { color: var(--inkra-ink); font-family: var(--inkra-font-display); font-size: var(--inkra-text-xl); font-weight: var(--inkra-weight-regular); line-height: var(--inkra-line-ui); margin: 0; }
+.inkra-drawer__description { color: var(--inkra-ink-muted); font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-body); margin: 0; }
+.inkra-drawer__divider { height: 8px; inset-inline: 0; pointer-events: none; position: absolute; width: 100%; }
+.inkra-drawer__header > .inkra-drawer__divider { bottom: -4px; }
+.inkra-drawer__footer > .inkra-drawer__divider { top: -4px; }
+
+@container inkra-drawer (max-width: 24rem) {
+  .inkra-drawer__header[data-custom-action] { align-items: stretch; flex-direction: column; }
+  .inkra-drawer__header[data-custom-action] .inkra-drawer__header-actions { align-self: stretch; order: -1; }
+}
+
+@keyframes inkra-drawer-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes inkra-drawer-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes inkra-drawer-left-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes inkra-drawer-left-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes inkra-drawer-right-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes inkra-drawer-right-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes inkra-drawer-top-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes inkra-drawer-top-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+@keyframes inkra-drawer-bottom-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes inkra-drawer-bottom-out { from { transform: translateY(0); } to { transform: translateY(100%); } }
+
+@media (max-width: 30rem) {
+  .inkra-drawer__content[data-direction="left"],
+  .inkra-drawer__content[data-direction="right"] { inline-size: min(var(--inkra-drawer-size), calc(100vw - var(--inkra-space-4))); }
+  .inkra-drawer__header,
+  .inkra-drawer__body,
+  .inkra-drawer__footer { padding: var(--inkra-space-4); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-drawer__backdrop,
+  .inkra-drawer__content { animation: none !important; }
+}
+
+@media print {
+  .inkra-drawer__backdrop,
+  .inkra-drawer__content { animation: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-drawer__backdrop { background: CanvasText; opacity: .25; }
+  .inkra-drawer__surface { background: Canvas; }
+  .inkra-drawer__content[data-direction="right"] { border-left: 1px solid CanvasText; }
+  .inkra-drawer__content[data-direction="left"] { border-right: 1px solid CanvasText; }
+  .inkra-drawer__content[data-direction="top"] { border-bottom: 1px solid CanvasText; }
+  .inkra-drawer__content[data-direction="bottom"] { border-top: 1px solid CanvasText; }
+  .inkra-drawer__header[data-divided] { border-bottom: 1px solid CanvasText; }
+  .inkra-drawer__footer[data-divided] { border-top: 1px solid CanvasText; }
+  .inkra-drawer__edge,
+  .inkra-drawer__focus-ring { display: none !important; }
+  .inkra-drawer__content:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
+}

package/dist/styles/dropdown-menu.css

@@ -0,0 +1,68 @@
+.inkra-menu {
+  --inkra-menu-enter-x: 0px;
+  --inkra-menu-enter-y: var(--inkra-space-1);
+  min-width: min(180px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)));
+  max-width: min(320px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)), calc(100vw - 16px));
+  outline: 0;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  z-index: calc(40 + var(--inkra-floating-layer-offset, 0));
+}
+.inkra-menu[data-side="top"] { --inkra-menu-enter-y: calc(-1 * var(--inkra-space-1)); }
+.inkra-menu[data-side="left"] { --inkra-menu-enter-x: calc(-1 * var(--inkra-space-1)); --inkra-menu-enter-y: 0px; }
+.inkra-menu[data-side="right"] { --inkra-menu-enter-x: var(--inkra-space-1); --inkra-menu-enter-y: 0px; }
+.inkra-menu[data-state="open"] { animation: inkra-menu-enter var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-menu[data-state="closed"] { animation: inkra-menu-exit var(--inkra-motion-fast) var(--inkra-ease) both; pointer-events: none; }
+.inkra-menu__paper {
+  box-sizing: border-box;
+  max-height: min(var(--radix-dropdown-menu-content-available-height, calc(100dvh - 16px)), calc(100dvh - 16px));
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
+  scrollbar-gutter: stable;
+}
+.inkra-menu__item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; color: var(--inkra-ink); outline: 0; cursor: default; font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
+.inkra-menu__item[data-destructive] { color: var(--inkra-danger-foreground); }
+.inkra-menu__item[data-disabled] { opacity: 0.5; pointer-events: none; }
+.inkra-menu__highlight { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--inkra-motion-fast) var(--inkra-ease); }
+.inkra-menu__item[data-highlighted] > .inkra-menu__highlight { opacity: 1; }
+.inkra-menu__icon { display: inline-flex; width: 16px; height: 16px; flex: none; position: relative; }
+.inkra-menu__label { flex: 1 1 auto; position: relative; min-width: 0; overflow-wrap: anywhere; }
+.inkra-menu__label > .inkra-pencil-text { min-width: 0; overflow-wrap: anywhere; width: 100%; }
+.inkra-menu__group-label { padding: 8px 12px; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
+.inkra-menu__separator { height: 8px; }
+
+@keyframes inkra-menu-enter {
+  from { opacity: 0; transform: translate(var(--inkra-menu-enter-x), var(--inkra-menu-enter-y)); }
+  to { opacity: 1; transform: translate(0, 0); }
+}
+
+@keyframes inkra-menu-exit {
+  from { opacity: 1; transform: translate(0, 0); }
+  to { opacity: 0; transform: translate(var(--inkra-menu-enter-x), var(--inkra-menu-enter-y)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-menu { animation: none !important; }
+  .inkra-menu__highlight { transition: none; }
+}
+
+@media print {
+  .inkra-menu { animation: none !important; }
+}
+@media (forced-colors: active) {
+  .inkra-menu { border: 1px solid CanvasText; background: Canvas; }
+  .inkra-menu__highlight { display: none !important; }
+  .inkra-menu__item[data-highlighted] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .inkra-menu__item[data-disabled] { color: GrayText; opacity: 1; }
+  .inkra-menu__icon .inkra-pencil-icon { display: none !important; }
+  .inkra-menu__item[data-state="checked"] .inkra-menu__icon::after { content: "✓"; }
+  .inkra-menu__item[data-state="indeterminate"] .inkra-menu__icon::after { content: "—"; }
+}

package/dist/styles/editable.css

@@ -0,0 +1,145 @@
+.inkra-editable {
+  --inkra-editable-control-height: var(--inkra-control-md);
+
+  display: inline-grid;
+  inline-size: min(100%, 30rem);
+  min-inline-size: 0;
+  color: var(--inkra-ink);
+  vertical-align: middle;
+}
+
+.inkra-editable[data-size="sm"] { --inkra-editable-control-height: var(--inkra-control-sm); }
+.inkra-editable[data-size="lg"] { --inkra-editable-control-height: var(--inkra-control-lg); }
+
+.inkra-editable__frame {
+  display: grid;
+  min-inline-size: 0;
+  align-items: start;
+  gap: var(--inkra-space-2);
+  min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
+}
+
+.inkra-editable__display-shell {
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
+  align-items: center;
+}
+
+.inkra-editable__focus-ring {
+  position: absolute !important;
+  inset-inline: 0;
+  inset-block: 50% auto;
+  block-size: var(--inkra-editable-control-height);
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+}
+
+.inkra-editable__display-shell:has(:focus-visible) .inkra-editable__focus-ring {
+  opacity: 1;
+}
+
+.inkra-editable__display {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-inline-size: 0;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
+  align-items: center;
+  padding: 0 var(--inkra-space-3);
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: text;
+  overflow-wrap: anywhere;
+  text-align: start;
+}
+
+.inkra-editable[data-multiline="true"] .inkra-editable__display {
+  block-size: auto;
+  min-block-size: var(--inkra-editable-control-height);
+  align-items: flex-start;
+  padding-block: var(--inkra-space-2);
+  white-space: pre-wrap;
+}
+
+.inkra-editable[data-disabled="true"] .inkra-editable__display,
+.inkra-editable[data-readonly="true"] .inkra-editable__display {
+  cursor: default;
+}
+
+.inkra-editable[data-disabled="true"] .inkra-editable__display-shell {
+  opacity: .62;
+}
+
+.inkra-editable__editor {
+  display: grid;
+  min-inline-size: 0;
+  min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
+  align-content: center;
+  gap: var(--inkra-space-2);
+}
+
+.inkra-editable__editor > :first-child {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.inkra-editable__actions {
+  display: inline-grid;
+  flex: none;
+  min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
+  grid-template-columns: repeat(2, var(--inkra-touch-target));
+  align-items: center;
+}
+
+.inkra-editable__action {
+  inline-size: var(--inkra-touch-target);
+  block-size: var(--inkra-touch-target);
+}
+
+.inkra-editable__custom-trigger {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.inkra-editable__select-row,
+.inkra-editable__custom-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--inkra-space-1);
+  min-inline-size: 0;
+}
+
+.inkra-editable__error {
+  inline-size: 100%;
+  color: var(--inkra-danger-foreground, var(--inkra-danger));
+  font-size: var(--inkra-text-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-editable__focus-ring { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .inkra-editable__display-shell:has(:focus-visible) { outline: 2px solid Highlight; outline-offset: -2px; }
+  .inkra-editable__focus-ring { display: none; }
+  .inkra-editable__error { color: Mark; }
+}
+
+@media print {
+  .inkra-editable__actions,
+  .inkra-editable__focus-ring { display: none; }
+}

package/dist/styles/empty.css

@@ -0,0 +1,108 @@
+.inkra-empty {
+  align-content: center;
+  align-items: var(--inkra-empty-align, center);
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  display: grid;
+  gap: var(--inkra-space-2);
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: var(--inkra-empty-align, center);
+  min-width: 0;
+  padding: var(--inkra-empty-padding, var(--inkra-space-6));
+  text-align: var(--inkra-empty-text-align, center);
+}
+
+.inkra-empty[data-align="start"] {
+  --inkra-empty-align: start;
+  --inkra-empty-text-align: start;
+}
+.inkra-empty[data-size="sm"] { --inkra-empty-padding: var(--inkra-space-4); }
+.inkra-empty[data-size="lg"] { --inkra-empty-padding: var(--inkra-space-8); gap: var(--inkra-space-3); }
+
+.inkra-empty__icon {
+  align-items: center;
+  color: var(--inkra-ink-muted);
+  display: inline-flex;
+  justify-content: center;
+  margin-block-end: var(--inkra-space-1);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.inkra-empty[data-size="sm"] .inkra-empty__icon:not([data-illustration]) { min-height: 1.5rem; min-width: 1.5rem; }
+.inkra-empty[data-size="lg"] .inkra-empty__icon:not([data-illustration]) { min-height: 2.5rem; min-width: 2.5rem; }
+
+.inkra-empty { --inkra-empty-illustration-size: 160px; }
+.inkra-empty[data-size="sm"] { --inkra-empty-illustration-size: 112px; }
+.inkra-empty[data-size="lg"] { --inkra-empty-illustration-size: 192px; }
+.inkra-empty__icon[data-illustration] {
+  width: var(--inkra-empty-icon-size, var(--inkra-empty-illustration-size, 160px));
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+.inkra-empty__illustration {
+  aspect-ratio: 1;
+  display: block;
+  flex: 1;
+  min-width: 0;
+  pointer-events: none;
+  position: relative;
+}
+.inkra-empty__illustration-layer,
+.inkra-empty__illustration-fallback {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.inkra-empty__illustration-layer--accent { color: var(--inkra-accent); }
+.inkra-empty__illustration-layer > .inkra-pencil-icon {
+  width: 100% !important;
+  height: 100% !important;
+}
+.inkra-empty__illustration-layer > [data-pencil-icon-ready] + svg { display: none; }
+.inkra-empty__illustration-layer > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
+@media (forced-colors: active), print {
+  .inkra-empty__illustration-layer > .inkra-pencil-icon { display: none; }
+  .inkra-empty__illustration-layer > [data-pencil-icon-ready] + svg { display: block; }
+}
+@media (forced-colors: active) {
+  .inkra-empty__illustration-layer--accent { color: CanvasText; }
+}
+
+.inkra-empty__title {
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+  max-width: 32rem;
+  overflow-wrap: anywhere;
+}
+.inkra-empty[data-size="sm"] .inkra-empty__title { font-size: var(--inkra-text-lg); }
+.inkra-empty[data-size="lg"] .inkra-empty__title { font-size: var(--inkra-text-2xl); }
+
+.inkra-empty__description {
+  color: var(--inkra-ink-muted);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+  margin: 0;
+  max-width: 38rem;
+  overflow-wrap: anywhere;
+}
+.inkra-empty[data-size="sm"] .inkra-empty__description { font-size: var(--inkra-text-sm); }
+
+.inkra-empty__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  justify-content: center;
+  margin-block-start: var(--inkra-space-2);
+  min-width: 0;
+}
+.inkra-empty[data-align="start"] .inkra-empty__actions { justify-content: flex-start; }
+
+@media (forced-colors: active) {
+  .inkra-empty__icon,
+  .inkra-empty__description { color: CanvasText; }
+}

package/dist/styles/flip.css

@@ -0,0 +1,101 @@
+.inkra-tilt {
+  --inkra-tilt-response: 120ms;
+  --inkra-tilt-reset-duration: 180ms;
+  --inkra-tilt-rotate-x: 0deg;
+  --inkra-tilt-rotate-y: 0deg;
+
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  transform: perspective(900px) rotateX(var(--inkra-tilt-rotate-x)) rotateY(var(--inkra-tilt-rotate-y));
+  transform-style: preserve-3d;
+  transition: transform var(--inkra-tilt-reset-duration) var(--inkra-ease);
+  will-change: transform;
+}
+
+.inkra-tilt[data-tilting="true"] {
+  transition-duration: var(--inkra-tilt-response);
+}
+
+.inkra-tilt[data-disabled="true"] {
+  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
+  will-change: auto;
+}
+
+.inkra-flip {
+  --inkra-flip-duration: 420ms;
+
+  display: grid;
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+
+.inkra-flip__scene {
+  display: grid;
+  max-inline-size: 100%;
+  transform-style: preserve-3d;
+  transition: transform var(--inkra-flip-duration) var(--inkra-ease);
+}
+
+.inkra-flip[data-flipped="true"] > .inkra-flip__scene {
+  transform: rotateY(180deg);
+}
+
+.inkra-flip__face {
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  grid-area: 1 / 1;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  pointer-events: none;
+  transform-style: preserve-3d;
+}
+
+.inkra-flip__face--back {
+  transform: rotateY(180deg);
+}
+
+.inkra-flip__face[data-active="true"] {
+  pointer-events: auto;
+}
+
+@media (hover: none), (pointer: coarse) {
+  .inkra-tilt {
+    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
+    transition: none;
+    will-change: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-tilt,
+  .inkra-tilt[data-tilting="true"],
+  .inkra-flip__scene {
+    transition: none;
+  }
+
+  .inkra-tilt {
+    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
+    will-change: auto;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-flip__face[data-active="true"] {
+    outline: 1px solid CanvasText;
+  }
+}
+
+@media print {
+  .inkra-tilt,
+  .inkra-flip__scene {
+    transform: none !important;
+  }
+
+  .inkra-flip__face {
+    display: none;
+  }
+
+  .inkra-flip__face[data-active="true"] {
+    display: block;
+  }
+}