@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/navigation/UnderlineTabs.tsx

@@ -1,83 +1,83 @@
-import { Each } from '../render/Each.js'
-import { styled } from 'styled-components'
-
-export interface UnderlineTabItem {
-  id: string
-  label: React.ReactNode
-}
-
-export interface UnderlineTabsProps {
-  items: readonly UnderlineTabItem[]
-  activeId: string
-  onSelect: (id: string) => void
-  'aria-label'?: string
-}
-
-//#region styled-components
-
-const StyledTabs = styled.nav`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-md);
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
-const StyledTab = styled.button<{ $active?: boolean }>`
-  border: 0;
-  border-bottom: 2px solid
-    ${({ $active }) =>
-      $active ? 'var(--platform-colors-accent)' : 'transparent'};
-  background: transparent;
-  color: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-text-secondary)'};
-  font: inherit;
-  font-weight: ${({ $active }) =>
-    $active
-      ? 'var(--platform-typography-font-weight-bold)'
-      : 'var(--platform-typography-font-weight-medium)'};
-  padding: 6px 2px;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--platform-colors-text);
-  }
-`
-
-//#endregion
-
-/** Underlined view switcher — a row of text tabs with an accent underline. */
-export function UnderlineTabs({
-  items,
-  activeId,
-  onSelect,
-  'aria-label': ariaLabel,
-}: UnderlineTabsProps): React.ReactElement {
-  function renderTab(item: UnderlineTabItem): React.ReactElement {
-    const active = item.id === activeId
-    return (
-      <StyledTab
-        type="button"
-        $active={active}
-        aria-current={active}
-        onClick={() => onSelect(item.id)}
-      >
-        {item.label}
-      </StyledTab>
-    )
-  }
-
-  return (
-    <StyledTabs aria-label={ariaLabel}>
-      <Each of={items} as={renderTab} />
-    </StyledTabs>
-  )
-}
+import { Each } from '../render/Each.js'
+import { styled } from 'styled-components'
+
+export interface UnderlineTabItem {
+  id: string
+  label: React.ReactNode
+}
+
+export interface UnderlineTabsProps {
+  items: readonly UnderlineTabItem[]
+  activeId: string
+  onSelect: (id: string) => void
+  'aria-label'?: string
+}
+
+//#region styled-components
+
+const StyledTabs = styled.nav`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-md);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const StyledTab = styled.button<{ $active?: boolean }>`
+  border: 0;
+  border-bottom: 2px solid
+    ${({ $active }) =>
+      $active ? 'var(--platform-colors-accent)' : 'transparent'};
+  background: transparent;
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-text-secondary)'};
+  font: inherit;
+  font-weight: ${({ $active }) =>
+    $active
+      ? 'var(--platform-typography-font-weight-bold)'
+      : 'var(--platform-typography-font-weight-medium)'};
+  padding: 6px 2px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--platform-colors-text);
+  }
+`
+
+//#endregion
+
+/** Underlined view switcher — a row of text tabs with an accent underline. */
+export function UnderlineTabs({
+  items,
+  activeId,
+  onSelect,
+  'aria-label': ariaLabel,
+}: UnderlineTabsProps): React.ReactElement {
+  function renderTab(item: UnderlineTabItem): React.ReactElement {
+    const active = item.id === activeId
+    return (
+      <StyledTab
+        type="button"
+        $active={active}
+        aria-current={active}
+        onClick={() => onSelect(item.id)}
+      >
+        {item.label}
+      </StyledTab>
+    )
+  }
+
+  return (
+    <StyledTabs aria-label={ariaLabel}>
+      <Each of={items} as={renderTab} />
+    </StyledTabs>
+  )
+}

package/src/components/common/navigation/index.ts

@@ -0,0 +1,15 @@
+export {
+  NavigationCardList,
+  NavigationCardRow,
+  type NavigationCardRowProps,
+} from './NavigationCardRow.js'
+export {
+  PathBreadcrumbs,
+  type PathBreadcrumbItem,
+  type PathBreadcrumbsProps,
+} from './PathBreadcrumbs.js'
+export {
+  UnderlineTabs,
+  type UnderlineTabItem,
+  type UnderlineTabsProps,
+} from './UnderlineTabs.js'

package/src/components/common/overlays/InstallAppPromptDialog.tsx

@@ -1,59 +1,59 @@
-import { Button } from '../buttons/Button.js'
-import { FlexRow } from '../containers/flex.js'
-import { Text } from '../typography/Text.js'
-import { Modal } from './Modal.js'
-import { styled } from 'styled-components'
-
-const StyledDialogActions = styled(FlexRow)`
-  justify-content: flex-end;
-  margin-top: var(--platform-spacing-md);
-`
-
-export interface InstallAppPromptDialogProps {
-  appSlug: string | null
-  appName: string
-  entityLabel?: string
-  open: boolean
-  busy?: boolean
-  onClose: () => void
-  /** Pick a plugin folder (dev tree or `.pure.app` package) and install via shell. */
-  onChoosePackage: () => void
-}
-
-export function InstallAppPromptDialog({
-  appSlug,
-  appName,
-  entityLabel,
-  open,
-  busy = false,
-  onClose,
-  onChoosePackage,
-}: InstallAppPromptDialogProps): React.ReactElement | null {
-  if (!appSlug) return null
-
-  return (
-    <Modal open={open} onClose={onClose} title="App not installed" size="sm">
-      <Text as="p" size="sm" tone="secondary">
-        {entityLabel
-          ? `${appName} is required to create “${entityLabel}”.`
-          : `${appName} is not installed.`}{' '}
-        Install the plugin into your PureScience apps folder (for development,
-        choose the app directory from this repo or a <code>.pure.app</code>{' '}
-        package).
-      </Text>
-      <StyledDialogActions $gap="sm">
-        <Button variant="ghost" size="sm" disabled={busy} onClick={onClose}>
-          Cancel
-        </Button>
-        <Button
-          variant="primary"
-          size="sm"
-          disabled={busy}
-          onClick={onChoosePackage}
-        >
-          {busy ? 'Installing…' : 'Choose package folder…'}
-        </Button>
-      </StyledDialogActions>
-    </Modal>
-  )
-}
+import { Button } from '../buttons/Button.js'
+import { FlexRow } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import { Modal } from './Modal.js'
+import { styled } from 'styled-components'
+
+const StyledDialogActions = styled(FlexRow)`
+  justify-content: flex-end;
+  margin-top: var(--platform-spacing-md);
+`
+
+export interface InstallAppPromptDialogProps {
+  appSlug: string | null
+  appName: string
+  entityLabel?: string
+  open: boolean
+  busy?: boolean
+  onClose: () => void
+  /** Pick a plugin folder (dev tree or `.pure.app` package) and install via shell. */
+  onChoosePackage: () => void
+}
+
+export function InstallAppPromptDialog({
+  appSlug,
+  appName,
+  entityLabel,
+  open,
+  busy = false,
+  onClose,
+  onChoosePackage,
+}: InstallAppPromptDialogProps): React.ReactElement | null {
+  if (!appSlug) return null
+
+  return (
+    <Modal open={open} onClose={onClose} title="App not installed" size="sm">
+      <Text as="p" size="sm" tone="secondary">
+        {entityLabel
+          ? `${appName} is required to create “${entityLabel}”.`
+          : `${appName} is not installed.`}{' '}
+        Install the plugin into your PureScience apps folder (for development,
+        choose the app directory from this repo or a <code>.pure.app</code>{' '}
+        package).
+      </Text>
+      <StyledDialogActions $gap="sm">
+        <Button variant="ghost" size="sm" disabled={busy} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          disabled={busy}
+          onClick={onChoosePackage}
+        >
+          {busy ? 'Installing…' : 'Choose package folder…'}
+        </Button>
+      </StyledDialogActions>
+    </Modal>
+  )
+}