@takesix/react 0.2.1 → 0.3.0

package/README.md

@@ -77,11 +77,16 @@ theme with the `theme` prop, or override variables through `className`:
 
 ### What is shown
 
-- **One level per screen**, with a breadcrumb. There is no header for the
-  opened block: if a level needs a title or summary, make it the first block.
+- **One level per screen**, with a breadcrumb below the top level. The header
+  shows the document's title and description on the top level, and the opened
+  block's below it.
+- **Short screens**: a level taller than the space it has is shrunk to fit
+  (down to 60%), instead of scrolling.
 - **Cards** show icon, title and description, and "N more inside" when the
-  block has children (direct children only). Click anywhere on such a card to
-  open it; text stays selectable.
+  block has children (direct children only). Click anywhere on such a card,
+  text included, to open it; selecting text to copy it does not open it.
+- **Phones**: the level keeps its structure. Blocks of a third or a half show
+  only icon, title and "N more inside"; the gaps between columns narrow.
 
 - **Arrows**: a link between nested blocks is drawn between their ancestors on
   the current screen. Several links between the same pair of blocks merge into
@@ -108,7 +113,9 @@ In edit mode you can:
 - group blocks: "Group blocks" in the toolbar, select two or more, Group. They
   move into a new block ("New group") where the first of them was, which frees
   room on a full level;
-- reorder blocks by dragging the dotted handle on their left;
+- reorder blocks by dragging the dotted handle on their left, or focus the
+  handle and use the arrow keys; drop on the middle of another card to move the
+  block inside it, or on a breadcrumb to move it up to that level;
 - link blocks: press the arrow button on the source, then click the target.
   The target may be on any level: while linking, open blocks ("N more inside")
   or go back up to find it. A block's own ancestors and descendants cannot be

package/dist/BlockCard.d.ts

@@ -5,8 +5,8 @@ export interface CardRect {
     width: number;
     height: number;
 }
-/** Where a dragged block would land relative to this card. */
-export type DropPosition = 'before' | 'after';
+/** Where a dragged block lands: next to this card, or inside it as its last child. */
+export type DropPosition = 'before' | 'inside' | 'after';
 /** Grid columns (of 6) each size spans. */
 export declare const SIZE_SPAN: Record<Size, number>;
 interface Props {
@@ -27,9 +27,13 @@ interface Props {
     /** Drag and drop to reorder, edit mode only. */
     isDragged: boolean;
     dropPosition: DropPosition | null;
+    /** The dragged block may move into this one (it has room for another child). */
+    canDropInside: boolean;
     onDragStartBlock: (id: string) => void;
     onDragOverBlock: (id: string, position: DropPosition) => void;
     onDragEndBlock: () => void;
+    /** Keyboard reordering from the drag handle: one place earlier (-1) or later (1). */
+    onMoveBy: (id: string, delta: -1 | 1) => void;
     onShowDetails: (id: string) => void;
     /** Choosing blocks to group: a click selects instead of opening. */
     selectable: boolean;
@@ -37,5 +41,5 @@ interface Props {
     onToggleSelect: (id: string) => void;
     onResize: (id: string, size: Size) => void;
 }
-export declare function BlockCard({ block, editing, onRename, onDescribe, onDelete, onAddChild, onDrillIn, connectingFrom, canLinkTo, isConnected, onStartConnect, onConnectTarget, onRegisterEl, isDragged, dropPosition, onDragStartBlock, onDragOverBlock, onDragEndBlock, onShowDetails, selectable, selected, onToggleSelect, onResize, }: Props): import("react").JSX.Element;
+export declare function BlockCard({ block, editing, onRename, onDescribe, onDelete, onAddChild, onDrillIn, connectingFrom, canLinkTo, isConnected, onStartConnect, onConnectTarget, onRegisterEl, isDragged, dropPosition, canDropInside, onDragStartBlock, onDragOverBlock, onDragEndBlock, onMoveBy, onShowDetails, selectable, selected, onToggleSelect, onResize, }: Props): import("react").JSX.Element;
 export {};

package/dist/fit.d.ts

@@ -0,0 +1,14 @@
+import type { Rect } from './geometry.js';
+/** A level is never shrunk below this; on even shorter screens it overflows. */
+export declare const MIN_ZOOM = 0.6;
+/**
+ * Zoom for a level so that its rows fit the height it has. Only ever shrinks:
+ * shrinking widens the columns and changes how the text wraps, so growing back
+ * on the next measurement could go back and forth forever. The caller starts
+ * again from 1 when the space or the blocks change.
+ *
+ * Works on screen rects, which already include the current zoom: `available`
+ * is the height of the grid, `items` its children, `rowGap` the gap between
+ * rows in CSS pixels before zoom.
+ */
+export declare function fitZoom(available: number, items: Rect[], rowGap: number, current: number): number;