@maple-kit/ui 0.9.0 → 0.10.0

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.
Files changed (48) hide show
  1. package/README.md +5 -2
  2. package/dist/cx.js +6 -0
  3. package/dist/icons/chevron.d.ts +4 -0
  4. package/dist/icons/chevron.js +8 -0
  5. package/dist/icons/code.d.ts +4 -0
  6. package/dist/icons/code.js +5 -0
  7. package/dist/icons/index.d.ts +4 -1
  8. package/dist/icons/index.js +4 -1
  9. package/dist/icons/link.d.ts +4 -0
  10. package/dist/icons/link.js +5 -0
  11. package/dist/index.d.ts +2 -1
  12. package/dist/index.js +2 -1
  13. package/dist/island/account.js +2 -1
  14. package/dist/island/approve.js +2 -1
  15. package/dist/island/content.js +2 -1
  16. package/dist/island/filters.js +2 -1
  17. package/dist/island/header.js +2 -1
  18. package/dist/island/island.js +2 -1
  19. package/dist/island/item.js +2 -1
  20. package/dist/island/list.js +2 -1
  21. package/dist/island/new-comment.js +2 -1
  22. package/dist/island/settings.js +2 -1
  23. package/dist/island/trigger.js +2 -1
  24. package/dist/island/unsent.js +2 -1
  25. package/dist/island/wordmark.js +2 -1
  26. package/dist/maple.d.ts +2 -1
  27. package/dist/maple.js +2 -1
  28. package/dist/mock/css.js +427 -0
  29. package/dist/mock/index.d.ts +4 -0
  30. package/dist/mock/index.js +4 -0
  31. package/dist/mock/language.d.ts +39 -0
  32. package/dist/mock/language.js +66 -0
  33. package/dist/mock/layers.js +168 -0
  34. package/dist/mock/menu.js +85 -0
  35. package/dist/mock/mock.d.ts +18 -0
  36. package/dist/mock/mock.js +200 -0
  37. package/dist/mock/sheet.d.ts +8 -0
  38. package/dist/mock/sheet.js +9 -0
  39. package/dist/notice/notice.js +2 -1
  40. package/dist/part.js +1 -4
  41. package/dist/root.js +2 -1
  42. package/dist/sheet-base.d.ts +11 -0
  43. package/dist/sheet-base.js +173 -0
  44. package/dist/stylesheet.d.ts +3 -12
  45. package/dist/stylesheet.js +5 -167
  46. package/dist/tip.js +1 -1
  47. package/dist/tokens.js +6 -2
  48. package/package.json +6 -4
package/README.md CHANGED
@@ -17,8 +17,11 @@ npm install @maple-kit/ui
17
17
  ## What is in it
18
18
 
19
19
  `@maple-kit/ui/maple` is the whole overlay as one component. The parts are also
20
- exported on their own: `/marks`, `/island`, `/composer`, `/picker`, `/notice`
21
- and `/icons`.
20
+ exported on their own: `/marks`, `/island`, `/composer`, `/picker`, `/notice`,
21
+ `/mock` and `/icons`.
22
+
23
+ `@maple-kit/ui/mock` is Maple Mock's box, `<MapleMock />`, for a page that
24
+ mocks without the review overlay. Inside `<Maple />` it is already mounted.
22
25
 
23
26
  Everything renders inside one shadow root, styled only through
24
27
  `new CSSStyleSheet()` and `adoptedStyleSheets`, with positions set by
package/dist/cx.js ADDED
@@ -0,0 +1,6 @@
1
+ //#region src/cx.ts
2
+ function cx(...names) {
3
+ return names.filter(Boolean).join(" ");
4
+ }
5
+ //#endregion
6
+ export { cx };
@@ -0,0 +1,4 @@
1
+ import { IconComponent } from "./icon.js";
2
+ //#region src/icons/chevron.d.ts
3
+ export declare const ChevronIcon: IconComponent;
4
+ //#endregion
@@ -0,0 +1,8 @@
1
+ import { createIcon } from "./icon.js";
2
+ //#region src/icons/chevron.ts
3
+ const ChevronIcon = createIcon({
4
+ d: "M4.5 6.2 8 9.8l3.5-3.6",
5
+ strokeWidth: 1.5
6
+ });
7
+ //#endregion
8
+ export { ChevronIcon };
@@ -0,0 +1,4 @@
1
+ import { IconComponent } from "./icon.js";
2
+ //#region src/icons/code.d.ts
3
+ export declare const CodeIcon: IconComponent;
4
+ //#endregion
@@ -0,0 +1,5 @@
1
+ import { createIcon } from "./icon.js";
2
+ //#region src/icons/code.ts
3
+ const CodeIcon = createIcon({ d: "M5.4 4.4 2 8l3.4 3.6 M10.6 4.4 14 8l-3.4 3.6" });
4
+ //#endregion
5
+ export { CodeIcon };
@@ -1,13 +1,16 @@
1
1
  import { ICON_SIZE, IconComponent, IconProps, IconSpec, createIcon } from "./icon.js";
2
2
  import { BranchIcon } from "./branch.js";
3
+ import { ChevronIcon } from "./chevron.js";
4
+ import { CodeIcon } from "./code.js";
3
5
  import { CogIcon } from "./cog.js";
4
6
  import { CommitIcon } from "./commit.js";
5
7
  import { IconCrossfade, IconCrossfadeProps } from "./crossfade.js";
6
8
  import { ElementIcon } from "./element.js";
9
+ import { LinkIcon } from "./link.js";
7
10
  import { NoPlaceIcon } from "./noplace.js";
8
11
  import { RegionIcon } from "./region.js";
9
12
  import { SmileyIcon } from "./smiley.js";
10
13
  import { SparkleIcon } from "./sparkle.js";
11
14
  import { TargetIcon } from "./target.js";
12
15
  import { TextIcon } from "./text.js";
13
- export { BranchIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, type IconComponent, IconCrossfade, type IconCrossfadeProps, type IconProps, type IconSpec, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };
16
+ export { BranchIcon, ChevronIcon, CodeIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, type IconComponent, IconCrossfade, type IconCrossfadeProps, type IconProps, type IconSpec, LinkIcon, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };
@@ -6,8 +6,11 @@ import { ElementIcon } from "./element.js";
6
6
  import { RegionIcon } from "./region.js";
7
7
  import { TextIcon } from "./text.js";
8
8
  import { CogIcon } from "./cog.js";
9
+ import { CodeIcon } from "./code.js";
10
+ import { LinkIcon } from "./link.js";
11
+ import { ChevronIcon } from "./chevron.js";
9
12
  import { BranchIcon } from "./branch.js";
10
13
  import { CommitIcon } from "./commit.js";
11
14
  import { NoPlaceIcon } from "./noplace.js";
12
15
  import { TargetIcon } from "./target.js";
13
- export { BranchIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, IconCrossfade, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };
16
+ export { BranchIcon, ChevronIcon, CodeIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, IconCrossfade, LinkIcon, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };
@@ -0,0 +1,4 @@
1
+ import { IconComponent } from "./icon.js";
2
+ //#region src/icons/link.d.ts
3
+ export declare const LinkIcon: IconComponent;
4
+ //#endregion
@@ -0,0 +1,5 @@
1
+ import { createIcon } from "./icon.js";
2
+ //#region src/icons/link.ts
3
+ const LinkIcon = createIcon({ d: "M7 9a2.8 2.8 0 0 0 4 0l2-2a2.8 2.8 0 0 0-4-4l-.6.6 M9 7a2.8 2.8 0 0 0-4 0L3 9a2.8 2.8 0 0 0 4 4l.6-.6" });
4
+ //#endregion
5
+ export { LinkIcon };
package/dist/index.d.ts CHANGED
@@ -5,7 +5,8 @@ import { PartAttributes, PartConfidence, PartForm, PartProvenance, PartState, Po
5
5
  import { DETAIL_COPY, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, PROVENANCE_SENTENCES, RUNG_LABELS, STATUS_LABELS, STATUS_SENTENCES, orphanTitle, rungLabel } from "./language.js";
6
6
  import { MapleRoot, MapleRootProps, ThemePreference } from "./root.js";
7
7
  import { REVIEWER_SLOT_COUNT, SLOT_INK_PROPERTY, SLOT_PROPERTY, applyReviewerSlot, slotColor, slotInk } from "./slots.js";
8
- import { OVERLAY_CSS, SCHEME_ATTRIBUTE } from "./stylesheet.js";
8
+ import { SCHEME_ATTRIBUTE } from "./sheet-base.js";
9
+ import { OVERLAY_CSS } from "./stylesheet.js";
9
10
  import { OverlayTheme, useOverlayScheme } from "./theme.js";
10
11
  import { Tip, TipProps, tipSpot } from "./tip.js";
11
12
  export { AsChildError, type AsChildProps, DETAIL_COPY, MOTION_TOKENS, MapleRoot, type MapleRootProps, MapleUiContextError, type MapleUiContextValue, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, OVERLAY_CSS, type OverlayTheme, PROVENANCE_SENTENCES, type PartAttributes, type PartConfidence, type PartForm, type PartProvenance, type PartState, type PointerState, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, REVIEWER_SLOT_COUNT, RUNG_LABELS, RUNTIME_TOKENS, MapleRoot as Root, SCHEME_ATTRIBUTE, SHEET_BREAKPOINT_PX, SLOT_INK_PROPERTY, SLOT_PROPERTY, STATUS_LABELS, STATUS_SENTENCES, Slot, type SlotProps, type ThemePreference, Tip, type TipProps, applyReviewerSlot, composeRefs, confidenceFor, dataAttributes, formFor, mergeProps, orphanTitle, pointerAttributes, rungLabel, slotColor, slotInk, tipSpot, useMapleUi, useOverlayScheme };
package/dist/index.js CHANGED
@@ -2,7 +2,8 @@ import { MapleUiContextError, useMapleUi } from "./context.js";
2
2
  import { confidenceFor, dataAttributes, formFor, pointerAttributes } from "./data.js";
3
3
  import { DETAIL_COPY, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, PROVENANCE_SENTENCES, RUNG_LABELS, STATUS_LABELS, STATUS_SENTENCES, orphanTitle, rungLabel } from "./language.js";
4
4
  import { MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, RUNTIME_TOKENS, SHEET_BREAKPOINT_PX } from "./tokens.js";
5
- import { OVERLAY_CSS, SCHEME_ATTRIBUTE } from "./stylesheet.js";
5
+ import { SCHEME_ATTRIBUTE } from "./sheet-base.js";
6
+ import { OVERLAY_CSS } from "./stylesheet.js";
6
7
  import { useOverlayScheme } from "./theme.js";
7
8
  import { MapleRoot } from "./root.js";
8
9
  import { AsChildError, Slot, composeRefs, mergeProps } from "./slot.js";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { ACCOUNT_COPY } from "./language.js";
3
4
  import { createElement, forwardRef } from "react";
4
5
  import { useGitHubLink, useMapleClient } from "@maple-kit/react";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { APPROVE_COPY } from "./language.js";
3
4
  import { createElement, forwardRef } from "react";
4
5
  import { useMaple, useMapleClient } from "@maple-kit/react";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { ISLAND_COPY } from "./language.js";
3
4
  import { useIsland } from "./context.js";
4
5
  import { forwardRef } from "react";
@@ -1,5 +1,6 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
2
  import { Tip } from "../tip.js";
3
+ import { renderPart } from "../part.js";
3
4
  import { FILTERS_LABEL, FILTER_LABELS, FILTER_ORDER, TALLY_ORDER, tallyTitle } from "./language.js";
4
5
  import { countsFor } from "./comments.js";
5
6
  import { listId, useIsland } from "./context.js";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { ISLAND_COPY } from "./language.js";
3
4
  import { useIsland } from "./context.js";
4
5
  import { Wordmark } from "./wordmark.js";
@@ -1,6 +1,7 @@
1
1
  import { useMapleUi } from "../context.js";
2
2
  import { composeRefs } from "../slot.js";
3
- import { cx, renderPart } from "../part.js";
3
+ import { cx } from "../cx.js";
4
+ import { renderPart } from "../part.js";
4
5
  import { numbersFor, resolutionsFor } from "./comments.js";
5
6
  import { IslandContext } from "./context.js";
6
7
  import { useDrag } from "./drag.js";
@@ -2,8 +2,9 @@ import { dataAttributes, formFor } from "../data.js";
2
2
  import { PROVENANCE_SENTENCES, STATUS_LABELS, STATUS_SENTENCES } from "../language.js";
3
3
  import { composeRefs } from "../slot.js";
4
4
  import { applyReviewerSlot } from "../slots.js";
5
- import { cx, renderPart } from "../part.js";
5
+ import { cx } from "../cx.js";
6
6
  import { Tip } from "../tip.js";
7
+ import { renderPart } from "../part.js";
7
8
  import { ISLAND_COPY, kindPhrase } from "./language.js";
8
9
  import { useIsland } from "./context.js";
9
10
  import { MapleLeaf } from "../marks/shape.js";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { FILTER_LABELS, ISLAND_COPY } from "./language.js";
3
4
  import { byReason } from "./comments.js";
4
5
  import { listId, reasonOf, useIsland } from "./context.js";
@@ -1,8 +1,9 @@
1
1
  import { dataAttributes } from "../data.js";
2
- import { cx, renderPart } from "../part.js";
2
+ import { cx } from "../cx.js";
3
3
  import { ElementIcon } from "../icons/element.js";
4
4
  import { RegionIcon } from "../icons/region.js";
5
5
  import { TextIcon } from "../icons/text.js";
6
+ import { renderPart } from "../part.js";
6
7
  import { ISLAND_COPY, PICK_LABELS, pickTitle } from "./language.js";
7
8
  import { useIsland } from "./context.js";
8
9
  import { createElement, forwardRef } from "react";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { CORNER_LABELS, CORNER_ORDER, ISLAND_COPY, SETTINGS_COPY, THEME_LABELS, THEME_TITLES } from "./language.js";
3
4
  import { Account } from "./account.js";
4
5
  import { useIsland } from "./context.js";
@@ -1,5 +1,6 @@
1
1
  import { dataAttributes } from "../data.js";
2
- import { cx, renderPart } from "../part.js";
2
+ import { cx } from "../cx.js";
3
+ import { renderPart } from "../part.js";
3
4
  import { openLabel, triggerLabel } from "./language.js";
4
5
  import { useIsland } from "./context.js";
5
6
  import { Leaf } from "./leaf.js";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { UNSENT_COPY } from "./language.js";
3
4
  import { createElement, forwardRef, useState } from "react";
4
5
  import { useMaple, useMapleClient } from "@maple-kit/react";
@@ -1,4 +1,5 @@
1
- import { cx, renderPart } from "../part.js";
1
+ import { cx } from "../cx.js";
2
+ import { renderPart } from "../part.js";
2
3
  import { ISLAND_COPY } from "./language.js";
3
4
  import { PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX } from "../marks/pixel-leaf.js";
4
5
  import { WORDMARK_PATH, WORDMARK_RATIO, WORDMARK_VIEW_BOX } from "../marks/wordmark.js";
package/dist/maple.d.ts CHANGED
@@ -19,7 +19,8 @@ export interface MapleProps extends MapleRootProps {
19
19
  }
20
20
  /**
21
21
  * The whole reviewer interface: the marks on the page, the picker, the
22
- * inventory and the composer, over one shadow root and one controller.
22
+ * inventory and the composer, over one shadow root and one controller, and the
23
+ * mock box on a page where Maple Mock's transport is installed.
23
24
  */
24
25
  export declare const Maple: import("react").ForwardRefExoticComponent<MapleProps & import("react").RefAttributes<HTMLDivElement>>;
25
26
  //#endregion
package/dist/maple.js CHANGED
@@ -20,6 +20,7 @@ import { Settings } from "./island/settings.js";
20
20
  import { IslandTrigger } from "./island/trigger.js";
21
21
  import { Unsent } from "./island/unsent.js";
22
22
  import { MapleMarkLayer } from "./marks/layer.js";
23
+ import { MapleMock } from "./mock/mock.js";
23
24
  import { MapleNotice } from "./notice/notice.js";
24
25
  import { MaplePicker } from "./picker/picker.js";
25
26
  import { createElement, forwardRef } from "react";
@@ -38,7 +39,7 @@ const Maple = forwardRef(function Maple(props, ref) {
38
39
  }, createElement(MapleMarkLayer, { key: "marks" }), createElement(MaplePicker, {
39
40
  key: "picker",
40
41
  ...hint === void 0 ? {} : { hint }
41
- }), inventory(root.branch, root.label, defaultOpen === true), composer(leave, attachments), children);
42
+ }), inventory(root.branch, root.label, defaultOpen === true), composer(leave, attachments), createElement(MapleMock, { key: "mock" }), children);
42
43
  });
43
44
  function inventory(branch, label, defaultOpen) {
44
45
  return createElement(Island, {