@parallelworks/ui 0.65.1 → 0.66.0

package/README.md

@@ -663,10 +663,11 @@ import { AddIcon, TrashIcon } from '@parallelworks/ui/icons'
 ```
 
 `@parallelworks/ui/icons` is the one import point for interface icons. Each
-name is a meaning, such as `RetryIcon` or `WarningIcon`, drawn from
-[Lucide](https://lucide.dev), so every icon shares one 24px grid and one 2px
-stroke. Don't import `lucide-react` directly: a name here keeps one glyph per
-meaning across the apps.
+name is a meaning, such as `RetryIcon` or `WarningIcon`. Every icon is drawn
+for this module by one hand: one path on a 16px grid with a 1.5px stroke, in
+fewer and simpler shapes than a 24px set so it stays crisp at the 16px it's
+mostly shown at. Don't bring in another icon library: a name here keeps one
+glyph per meaning across the apps.
 
 - **Size and color:** an icon is `1em` square in `currentColor`, so it follows
   the text around it. A class such as `size-4` or `h-3 w-3` sets another size,
@@ -690,10 +691,13 @@ meaning across the apps.
   write-up to read, such as a case study, and `NotebookIcon` one notebook.
   `PendingIcon` is a requirement not met yet and `NotRunningIcon` a run not
   started; they share the empty circle, so keep them out of the same list.
-- **Adding an icon:** pick the [Lucide glyph](https://lucide.dev/icons) and add
-  `export const NameIcon = /* @__PURE__ */ icon(Glyph)` to `src/icons.tsx`,
-  named for what it means rather than what it shows. Reuse an existing name
-  when the meaning is the same.
+- **Adding an icon:** draw it as one path on the 16px grid and add
+  `export const NameIcon = /* @__PURE__ */ drawn('M…')` to `src/icons.tsx`,
+  named for what it means rather than what it shows. Reuse the existing parts
+  (the status circle, the person, the file and folder outlines, the
+  bottom-right corner for a plus, minus, check or X) so families match, and
+  check it at 16px beside its neighbours in the `UI/Icons` story. Reuse an
+  existing name when the meaning is the same.
 
 Logos of other companies' products, such as `GitHubIcon` or `UbuntuIcon`, are
 in `@parallelworks/ui/brand-icons`. They take the same props, are filled in the

package/dist/ai/components/AllocationSelector.js

@@ -35,7 +35,7 @@ function AllocationSelector() {
 	if (!isOrgProvider || !allocations?.length) return null;
 	const selected = allocations.find((a) => a.name === selectedAllocation);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 items-center gap-2",
+		className: "flex min-w-0 shrink-[3] items-center gap-2",
 		children: [/* @__PURE__ */ jsx(Select, {
 			"aria-label": t.choose,
 			items: allocations.map((a) => ({
@@ -56,7 +56,7 @@ function AllocationSelector() {
 				})]
 			})
 		}), selected && /* @__PURE__ */ jsx("span", {
-			className: "text-xs tabular-nums theme-muted-text whitespace-nowrap",
+			className: "hidden text-xs tabular-nums theme-muted-text whitespace-nowrap @md:inline",
 			children: t.usage(money(selected.used ?? 0), money(selected.total))
 		})]
 	});

package/dist/ai/components/ChatEmptyState.js

@@ -8,7 +8,7 @@ import { useChat } from "../core/ChatProvider.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
 import { getGreeting } from "../core/greeting.js";
 import useDragDrop from "../core/useDragDrop.js";
-import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
+import { ComposerControls, ComposerUsage, ConnectToolsLink } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import ChatStage from "./ChatStage.js";
@@ -132,7 +132,7 @@ function ChatEmptyState({ targetSession }) {
 								disabled: isLoading || isLoadingModels || models.length === 0,
 								placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
 								settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-								settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
 							}),
 							prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx("ul", {
 								className: "mx-auto max-w-[var(--chat-column,50rem)] px-8",

package/dist/ai/components/ModelSelector.js

@@ -140,7 +140,7 @@ function ModelSelector({ targetSession }) {
 					children: getModelLabel(selected)
 				}),
 				selected.provider && /* @__PURE__ */ jsx("span", {
-					className: "max-w-[45%] shrink-0 truncate text-xs",
+					className: "hidden max-w-[45%] shrink-0 truncate text-xs @md:inline",
 					children: selected.provider
 				}),
 				issue && /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-(--theme-warning)" })

package/dist/ai/components/agent/AgentMessageParts.js

@@ -271,7 +271,7 @@ function ToolCallBlock({ part }) {
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
 			!isDiff && !expanded && /* @__PURE__ */ jsx("div", {
-				className: cx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-(--theme-error-text)" : "theme-muted-text"),
+				className: cx("ml-5 mt-0.5 truncate text-[13px]", part.status === "error" ? "text-(--theme-error-text)" : "theme-muted-text"),
 				children: summary
 			}),
 			isDiff && /* @__PURE__ */ jsx("div", {

package/dist/brandIcons.js

@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 /** A one-color logo in the text's color, at the text's size. */
 function brand(viewBox, ...paths) {
-	function Icon({ title, size = "1em", color = "currentColor", strokeWidth: _strokeWidth, absoluteStrokeWidth: _absoluteStrokeWidth, nonScalingStroke: _nonScalingStroke, children, ...props }) {
+	function Icon({ title, size = "1em", color = "currentColor", strokeWidth: _strokeWidth, children, ...props }) {
 		const named = Boolean(title || props["aria-label"] || props["aria-labelledby"]);
 		return /* @__PURE__ */ jsxs("svg", {
 			xmlns: "http://www.w3.org/2000/svg",

package/dist/icons.d.ts

@@ -1,6 +1,7 @@
-import type { LucideProps } from 'lucide-react';
-import type { ReactNode } from 'react';
-export interface IconProps extends LucideProps {
+import type { ReactNode, SVGProps } from 'react';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    /** Width and height; the text's size by default. */
+    size?: string | number | undefined;
     /** Names the icon for assistive technology. Without it, or an `aria-label`,
      *  the icon is decoration and hidden from assistive technology. */
     title?: string | undefined;