@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/file-explorer/file-explorer.css

@@ -0,0 +1,632 @@
+/* file-explorer — a 20 px panel on surface-1: a bar (the breadcrumb, 8 px tools, a list/grid switch whose pill slides),
+   the folder tree on the side (gone under 560 px), the folder's content as 8 px rows or 12 px tiles, and a status line.
+   Icons are drawn: folders in the accent (their lid opens under a dragged card), files as a page tinted by family with
+   the extension on a tag. The list drops the date column under 440 px of content and the size under 280 px. The height
+   is --mk-fx-height (26rem); the tree's widest, --mk-fx-side (13rem). */
+.mk-file-explorer,
+mk-file-explorer {
+  --mk-fx-height: 26rem;
+  --mk-fx-side: 13rem;
+  --mk-fx-columns: 1.5rem minmax(0, 1fr) 6.5rem 7.5rem;
+  container-type: inline-size;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  height: var(--mk-fx-height);
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font-size: 0.875rem;
+}
+
+/* ── The bar ─────────────────────────────────────────────────────────────── */
+[data-mk-fx-bar] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
+  border-bottom: 1px solid var(--mk-outline-soft);
+}
+
+[data-mk-fx-crumbs] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+[data-mk-fx-tools] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+[data-mk-fx-tool] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    opacity 0.15s;
+}
+
+[data-mk-fx-tool]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mk-text) 7%, transparent);
+}
+
+[data-mk-fx-tool]:focus-visible,
+[data-mk-fx-views] button:focus-visible,
+[data-mk-fx-head] button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 1px;
+}
+
+[data-mk-fx-tool]:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+[data-mk-fx-tool] svg {
+  flex: none;
+}
+
+[data-mk-fx-views] {
+  position: relative;
+  display: inline-flex;
+  margin-left: 0.25rem;
+  padding: 3px;
+  border-radius: 11px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-fx-view-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--mk-shadow-color, #000) 18%, transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-mk-fx-views] button {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 1.875rem;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+[data-mk-fx-views] button[aria-checked='true'] {
+  color: var(--mk-text);
+}
+
+/* ── The tree and the content ────────────────────────────────────────────── */
+[data-mk-fx-body] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-height: 0;
+}
+
+/* The tree takes 30 % of the explorer, between 8.5rem and --mk-fx-side. */
+[data-mk-fx-tree] > [data-mk-fx-body] {
+  grid-template-columns: clamp(8.5rem, 30cqi, var(--mk-fx-side)) minmax(0, 1fr);
+}
+
+[data-mk-fx-side] {
+  display: block;
+  min-height: 0;
+  overflow: hidden auto;
+  padding: 0.5rem 0.375rem;
+  border-right: 1px solid var(--mk-outline-soft);
+  overscroll-behavior: contain;
+}
+
+[data-mk-fx-side] [data-mk-tree-label] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+[data-mk-fx-side] [data-mk-fx-icon] {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+[data-mk-fx-tree-name] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The content measures itself: its columns follow its own width, not the page's. */
+[data-mk-fx-main] {
+  container: mk-fx-main / inline-size;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+}
+
+[data-mk-fx-head] {
+  display: grid;
+  grid-template-columns: var(--mk-fx-columns);
+  column-gap: 0.75rem;
+  padding: 0.375rem 1rem 0.125rem;
+}
+
+[data-mk-fx-head][hidden] {
+  display: none;
+}
+
+[data-mk-fx-head] button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  padding: 0.25rem 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+[data-mk-fx-head] button > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-fx-head] button[data-active] {
+  color: var(--mk-text);
+}
+
+[data-mk-fx-head] button svg {
+  flex: none;
+  opacity: 0;
+  transition:
+    opacity 0.15s,
+    transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-fx-head] button[data-active] svg {
+  opacity: 1;
+}
+
+[data-mk-fx-head] button[data-direction='desc'] svg {
+  transform: rotate(180deg);
+}
+
+[data-mk-fx-pane] {
+  position: relative;
+  min-height: 0;
+  overflow: hidden auto;
+  padding: 0.375rem;
+  overscroll-behavior: contain;
+}
+
+[data-mk-fx-items] {
+  display: grid;
+  gap: 2px;
+  outline: none;
+}
+
+[data-mk-fx-items]:focus-visible {
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-fx-leaving] {
+  position: absolute;
+  margin: 0;
+  pointer-events: none;
+}
+
+[data-mk-fx-item] {
+  display: grid;
+  grid-template-columns: var(--mk-fx-columns);
+  align-items: center;
+  column-gap: 0.75rem;
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0 0.625rem;
+  border-radius: 8px;
+  outline: none;
+  cursor: default;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  /* Colours only: opacity and transforms belong to the engine's motion. */
+  transition:
+    background-color 0.18s,
+    color 0.18s;
+}
+
+[data-mk-fx-item]:hover {
+  background: color-mix(in srgb, var(--mk-text) 5%, transparent);
+}
+
+[data-mk-fx-item][aria-selected='true'] {
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+[data-mk-fx-item]:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-fx-item][data-mk-fx-cut],
+[data-mk-fx-item][data-mk-fx-dragging] {
+  opacity: 0.45;
+}
+
+[data-mk-fx-drop] {
+  background: var(--mk-accent-soft);
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-fx-dnd],
+[data-mk-fx-dnd] * {
+  cursor: grabbing;
+}
+
+/* The icons (the engine moves the icon itself, so the drop effects live on its drawing). */
+[data-mk-fx-icon] {
+  position: relative;
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+[data-mk-fx-icon] svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-fx-folder-back] {
+  fill: color-mix(in srgb, var(--mk-accent) 70%, var(--mk-surface-1));
+}
+
+[data-mk-fx-folder-front] {
+  fill: color-mix(in srgb, var(--mk-accent) 42%, var(--mk-surface-1));
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-fx-drop] [data-mk-fx-icon] svg {
+  transform: scale(1.1);
+}
+
+[data-mk-fx-drop] [data-mk-fx-folder-front] {
+  transform: skewX(-12deg) scaleY(0.8);
+}
+
+[data-mk-fx-icon] {
+  --mk-fx-tint: var(--mk-muted);
+}
+
+[data-mk-fx-icon][data-family='image'] {
+  --mk-fx-tint: #b4489f;
+}
+
+[data-mk-fx-icon][data-family='pdf'] {
+  --mk-fx-tint: #d2453a;
+}
+
+[data-mk-fx-icon][data-family='doc'] {
+  --mk-fx-tint: #3a6fd2;
+}
+
+[data-mk-fx-icon][data-family='sheet'] {
+  --mk-fx-tint: #1f9d5b;
+}
+
+[data-mk-fx-icon][data-family='slides'] {
+  --mk-fx-tint: #e07b16;
+}
+
+[data-mk-fx-icon][data-family='code'] {
+  --mk-fx-tint: #6b5bd2;
+}
+
+[data-mk-fx-icon][data-family='archive'] {
+  --mk-fx-tint: #8a6a3d;
+}
+
+[data-mk-fx-icon][data-family='media'] {
+  --mk-fx-tint: #0f8ea8;
+}
+
+[data-mk-fx-page] {
+  fill: color-mix(in srgb, var(--mk-fx-tint) 14%, var(--mk-surface-1));
+  stroke: color-mix(in srgb, var(--mk-fx-tint) 60%, var(--mk-surface-1));
+  stroke-width: 2.5;
+}
+
+[data-mk-fx-fold] {
+  fill: color-mix(in srgb, var(--mk-fx-tint) 60%, var(--mk-surface-1));
+}
+
+[data-mk-fx-ext] {
+  display: none;
+}
+
+/* The texts. */
+[data-mk-fx-name] {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-fx-size],
+[data-mk-fx-date] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-fx-item][aria-selected='true'] :is([data-mk-fx-size], [data-mk-fx-date]) {
+  color: inherit;
+  opacity: 0.75;
+}
+
+[data-mk-fx-rename] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 1.875rem;
+  padding: 0 0.5rem;
+  border: 1.5px solid var(--mk-accent);
+  border-radius: 8px;
+  outline: none;
+  background: var(--mk-surface-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 22%, transparent);
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 500;
+}
+
+[data-mk-fx-rename][aria-invalid='true'] {
+  border-color: var(--mk-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-error) 22%, transparent);
+}
+
+[data-mk-fx-empty] {
+  margin: 0;
+  padding: 2.5rem 1rem;
+  color: var(--mk-muted);
+  text-align: center;
+}
+
+[data-mk-fx-empty][hidden] {
+  display: none;
+}
+
+/* ── The grid ────────────────────────────────────────────────────────────── */
+[data-mk-view='grid'] [data-mk-fx-items] {
+  grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));
+  gap: 0.25rem;
+}
+
+[data-mk-view='grid'] [data-mk-fx-item] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  min-height: 0;
+  padding: 0.75rem 0.375rem 0.625rem;
+  border-radius: 12px;
+  text-align: center;
+}
+
+[data-mk-view='grid'] [data-mk-fx-item] [data-mk-fx-icon] {
+  width: 3rem;
+  height: 3rem;
+}
+
+[data-mk-view='grid'] [data-mk-fx-ext] {
+  position: absolute;
+  bottom: 12%;
+  left: 50%;
+  display: block;
+  padding: 0.0625rem 0.3rem;
+  border-radius: 4px;
+  background: var(--mk-fx-tint);
+  color: #fff;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.4;
+  translate: -50% 0;
+}
+
+[data-mk-view='grid'] [data-mk-fx-name] {
+  display: -webkit-box;
+  max-width: 100%;
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+[data-mk-view='grid'] [data-mk-fx-size] {
+  font-size: 0.75rem;
+}
+
+[data-mk-view='grid'] [data-mk-fx-date] {
+  display: none;
+}
+
+[data-mk-view='grid'] [data-mk-fx-rename] {
+  text-align: center;
+}
+
+/* ── The status line ─────────────────────────────────────────────────────── */
+[data-mk-fx-status] {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  min-width: 0;
+  padding: 0.4375rem 0.875rem;
+  border-top: 1px solid var(--mk-outline-soft);
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-fx-count] {
+  flex: none;
+}
+
+[data-mk-fx-note] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-fx-note][data-mk-fx-error] {
+  color: var(--mk-error);
+  font-weight: 500;
+}
+
+/* ── The dragged card ────────────────────────────────────────────────────── */
+[data-mk-fx-ghost] {
+  position: fixed;
+  inset: 0 auto auto 0;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 16rem;
+  margin: 0;
+  padding: 0.5rem 0.875rem 0.5rem 0.5rem;
+  overflow: visible;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 12px;
+  background: var(--mk-surface-1);
+  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--mk-shadow-color, #000) 40%, transparent);
+  color: var(--mk-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  pointer-events: none;
+  will-change: transform;
+}
+
+[data-mk-fx-ghost] [data-mk-fx-icon] {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+[data-mk-fx-ghost] > span:nth-child(2) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-fx-ghost-count] {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+  display: grid;
+  place-items: center;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+/* ── Narrow ──────────────────────────────────────────────────────────────── */
+@container (max-width: 640px) {
+  [data-mk-fx-tool] > span {
+    display: none;
+  }
+}
+
+@container (max-width: 560px) {
+  [data-mk-fx-side] {
+    display: none;
+  }
+
+  [data-mk-fx-tree] > [data-mk-fx-body] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container mk-fx-main (max-width: 440px) {
+  [data-mk-fx-head],
+  [data-mk-fx-item] {
+    --mk-fx-columns: 1.5rem minmax(0, 1fr) 5.5rem;
+  }
+
+  [data-mk-fx-date],
+  [data-mk-fx-head] button[data-sort='modified'] {
+    display: none;
+  }
+}
+
+@container mk-fx-main (max-width: 280px) {
+  [data-mk-fx-head],
+  [data-mk-fx-item] {
+    --mk-fx-columns: 1.5rem minmax(0, 1fr);
+  }
+
+  [data-mk-fx-size],
+  [data-mk-fx-head] button[data-sort='size'] {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-fx-icon] svg,
+  [data-mk-fx-folder-front],
+  [data-mk-fx-head] button svg {
+    transition: none;
+  }
+}

package/src/components/file-explorer/react.tsx

@@ -0,0 +1,77 @@
+'use client';
+import { forwardRef, useImperativeHandle, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createFileExplorer, type FileEntry, type FileExplorerInstance, type FileExplorerOptions } from './engine';
+
+export interface FileExplorerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'>, Omit<FileExplorerOptions, 'files'> {
+  files: FileEntry[];
+}
+
+export type FileExplorerHandle = Pick<FileExplorerInstance, 'open' | 'up' | 'setView' | 'select' | 'createFolder' | 'rename' | 'remove' | 'move'>;
+
+/**
+ * <FileExplorer files={files} onChange={setFiles} onOpen={preview} />. Hand back what onChange gives (or nothing:
+ * the explorer keeps its own copy); different files from the app replace the shown ones.
+ */
+export const FileExplorer = forwardRef<FileExplorerHandle, FileExplorerProps>(function FileExplorer(
+  { files, rootLabel, folder, view, tree, readOnly, locale, label, onOpen, onNavigate, onSelectionChange, onViewChange, onChange, className, ...props },
+  handle,
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<FileExplorerInstance | null>(null);
+  const open = useLatest(onOpen);
+  const navigate = useLatest(onNavigate);
+  const select = useLatest(onSelectionChange);
+  const switchView = useLatest(onViewChange);
+  const change = useLatest(onChange);
+  useImperativeHandle(
+    handle,
+    () => ({
+      open: (id) => instance.current?.open(id),
+      up: () => instance.current?.up(),
+      setView: (next) => instance.current?.setView(next),
+      select: (ids) => instance.current?.select(ids),
+      createFolder: (name) => instance.current?.createFolder(name) ?? null,
+      rename: (id, name) => instance.current?.rename(id, name),
+      remove: (ids) => instance.current?.remove(ids),
+      move: (ids, to) => instance.current?.move(ids, to),
+    }),
+    [],
+  );
+  const filesKey = JSON.stringify(files);
+  useIsomorphicLayoutEffect(() => {
+    const created = createFileExplorer(ref.current, {
+      files: JSON.parse(filesKey) as FileEntry[],
+      rootLabel,
+      folder,
+      view,
+      tree,
+      readOnly,
+      locale,
+      label,
+      onOpen: (entry) => open.current?.(entry),
+      onNavigate: (entry) => navigate.current?.(entry),
+      onSelectionChange: (ids) => select.current?.(ids),
+      onViewChange: (next) => switchView.current?.(next),
+      onChange: (next, detail) => change.current?.(next, detail),
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rootLabel, tree, readOnly, locale, label]);
+  useIsomorphicLayoutEffect(() => {
+    const explorer = instance.current;
+    // The echo of a change made in the explorer is already shown.
+    if (explorer && JSON.stringify(explorer.files) !== filesKey) explorer.setFiles(JSON.parse(filesKey) as FileEntry[]);
+  }, [filesKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (view && instance.current && instance.current.view !== view) instance.current.setView(view);
+  }, [view]);
+  useIsomorphicLayoutEffect(() => {
+    if (folder && instance.current && instance.current.folder !== folder) instance.current.open(folder);
+  }, [folder]);
+  return <div {...props} ref={ref} className={['mk-file-explorer', className].filter(Boolean).join(' ')} />;
+});