@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/src/@/components/ui/sheet.tsx

@@ -0,0 +1,142 @@
+// shadcn sheet — sourced from shadcn (new-york) 2026-09-21
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '../../lib/utils.js'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/auth/context.ts

@@ -18,8 +18,6 @@ export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =
   appendFlowService<C, T>(context);
   (context as unknown as AppContext<AppConfig>).flow = () => context.service('flow')
 
-  context.makeContext = makeContext as typeof context.makeContext
-
   return context
 }
 

package/src/auth/entrypoints.ts

@@ -0,0 +1,5 @@
+
+import { entrypoints as authBindings } from '@owlmeans/client-auth/manager/entrypoints'
+import { entrypoints as configBindings } from '@owlmeans/api-config-client'
+
+export const entrypoints = [...authBindings, ...configBindings]

package/src/auth/exports.ts

@@ -1,12 +1,12 @@
 
-export { handler, useModule, useValue, useNavigate } from '@owlmeans/client'
-export type { Navigator } from '@owlmeans/client'
+export { handler, lazyHandler, lazyComponent, useEntrypoint, useValue, useNavigate } from '@owlmeans/client'
+export type { Navigator, LazyComponent, LazyComponentOptions, LazyHandler } from '@owlmeans/client'
 export { config } from '@owlmeans/client-context'
 export { service } from '@owlmeans/config'
-export { guard, parent, EntrypointOutcome, clone } from '@owlmeans/entrypoint'
+export { EntrypointOutcome } from '@owlmeans/entrypoint'
 export type { AbstractRequest } from '@owlmeans/entrypoint'
 export { addWebService } from '@owlmeans/client-config'
-export { entrypoint, elevate, provideRequest, stab } from '@owlmeans/client-entrypoint'
+export { bind, bindAll, bindScreen, clientRequestHelper, provideRequest, stab } from '@owlmeans/client-entrypoint'
 export type { ClientEntrypoint as Module, ClientRequest as Request } from '@owlmeans/client-entrypoint'
 export { route as croute } from '@owlmeans/client-route'
 export { route, frontend, RouteMethod } from '@owlmeans/route'

package/src/auth/plugins/basic-ed25519.tsx

@@ -9,7 +9,7 @@ import { AuthenticationStage, DISPATCHER } from '@owlmeans/auth'
 import { Form } from '../../components/form/index.js'
 import { TextInput } from '../../components/form/text/index.js'
 import { useCallback } from 'react'
-import { Progress } from '@/components/ui/progress'
+import { Progress } from '../../@/components/ui/progress.js'
 import { BlockScaling } from '@owlmeans/client-panel'
 import { useContext } from '@owlmeans/web-client'
 
@@ -37,7 +37,7 @@ export const Ed22519BasicAuthUIPlugin: AuthenticationRenderer = ({ type, stage,
 
 const createSubmit = (context: AppContext, control: AuthenticationControl) => async (data: FormData) => {
   const token = await control.authenticate({
-    entityId: data.entityId,
+    entitySlug: data.entityId,
     userId: data.address,
     credential: data.privateKey
   })
@@ -46,8 +46,8 @@ const createSubmit = (context: AppContext, control: AuthenticationControl) => as
     return
   }
 
-  const [url] = await context.module<ClientEntrypoint<string, AuthRequest>>(DISPATCHER)
-    .call({ query: token })
+  const url = await context.entrypoint<ClientEntrypoint<string, AuthRequest>>(DISPATCHER)
+    .url({ query: token })
 
   control.setStage?.(control.stage = AuthenticationStage.Authenticated)
   // Give some time - that is really not cenessary - actually we need 

package/src/auth/plugins/re-captcha.tsx

@@ -7,7 +7,7 @@ import ReCAPTCHA from 'react-google-recaptcha'
 import { useCallback, useState } from 'react'
 import { PanelContext } from '@owlmeans/client-panel'
 import { Text } from '../../components/text.js'
-import { Progress } from '@/components/ui/progress'
+import { Progress } from '../../@/components/ui/progress.js'
 import type { AppContext, Module } from '@owlmeans/web-client'
 import { useContext } from '@owlmeans/web-client'
 import type { AuthRequest } from '@owlmeans/auth-common'
@@ -53,8 +53,8 @@ const createFinish = (context: AppContext, control: AuthenticationControl) => as
     console.timeLog('empty token')
     return
   }
-  const [url] = await context.module<Module<string, AuthRequest>>(DISPATCHER)
-    .call({ query: authToken })
+  const url = await context.entrypoint<Module<string, AuthRequest>>(DISPATCHER)
+    .url({ query: authToken })
 
   control.setStage?.(control.stage = AuthenticationStage.Authenticated)
 

package/src/auth/plugins/tunnel-consumer.tsx

@@ -11,7 +11,7 @@ import { BlockScaling } from '@owlmeans/client-panel'
 import { Status } from '../../components/status.js'
 import { Button } from '../../components/form/button/component.js'
 import { QRCodeCanvas } from 'qrcode.react'
-import { Progress } from '@/components/ui/progress'
+import { Progress } from '../../@/components/ui/progress.js'
 
 /**
  * Read a CSS variable from `:root` (consumer-owned theme). Falls back to

package/src/components/block.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react'
 import type { FC } from 'react'
 import type { BlockProps } from './types.js'
 import { PanelContext, usePanelHelper } from '@owlmeans/client-panel'
-import { Card, CardContent, CardFooter } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { Card, CardContent, CardFooter } from '../@/components/ui/card.js'
+import { cn } from '../@/lib/utils.js'
 import { scalingToStyles } from './helper.js'
 
 export const Block: FC<BlockProps> = ({ children, horizontal, vertical, Actions, i18n, className, style }) => {

package/src/components/consts.local.ts

@@ -0,0 +1,29 @@
+import type { TextVariant } from './types.js'
+
+/**
+ * Tailwind default breakpoints — kept stable across consumers. If a consumer
+ * has customised Tailwind breakpoints in their app config, override this
+ * via a wrapping hook in the app.
+ */
+export const BREAKPOINTS: Array<{ name: string, min: number, max: number }> = [
+  { name: 'xs', min: 0,    max: 639  },
+  { name: 'sm', min: 640,  max: 767  },
+  { name: 'md', min: 768,  max: 1023 },
+  { name: 'lg', min: 1024, max: 1279 },
+  { name: 'xl', min: 1280, max: Number.POSITIVE_INFINITY },
+]
+
+export const variantClasses: Record<TextVariant, string> = {
+  h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight',
+  h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
+  h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
+  h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
+  p: 'leading-7',
+  lead: 'text-xl text-muted-foreground',
+  large: 'text-lg font-semibold',
+  small: 'text-sm font-medium leading-none',
+  muted: 'text-sm text-muted-foreground',
+  blockquote: 'mt-6 border-l-2 pl-6 italic',
+}
+
+export const DARK_CLASS = 'dark'

package/src/components/footer/component.tsx

@@ -1,35 +1,77 @@
 import type { FC } from 'react'
-import { defaultNavTranslate, resolveNavLabel } from '@owlmeans/client-panel'
-import { cn } from '@/lib/utils'
+import { navLabelHelper } from '@owlmeans/client-panel'
+import { cn } from '../../@/lib/utils.js'
 import { Link } from '../link.js'
+import { ThemeToggle } from '../scheme/toggle.js'
+import { ShellCredit, useShellCredit } from './credit.js'
 
 import type { FooterProps } from './types.js'
 
 /**
- * The standard footer — a row of links plus whatever the app adds as children.
+ * The standard footer — an optional full-width `content` block, a centred row of links plus
+ * whatever the app adds as children, and the platform/owner credit line, last.
+ *
+ * `content` is a block of the container, not an entry of the link row. The container centres its
+ * children (`items-center`), which is right for a row of links and a credit line and wrong for an
+ * application's own footer layout: centred, a block shrink-wraps to its content and its columns
+ * collapse towards the middle. `self-stretch` takes that one child back to the container's full
+ * width, and `text-start` undoes the container's centred text, so an application lays its own
+ * footer out from the natural edge — while the container keeps `items-center` for everything else.
  *
  * Labels are resolved HERE and handed to `Link` as children: `Link`'s own default label
  * looks up `modules.<alias>` with no fallback, so an app without i18n would print the raw
  * key. Resolving first means a literal label, a translation, or a humanized alias — never
  * a key.
+ *
+ * The credit is rendered unconditionally — never behind a prop, so a restyle cannot delete it.
+ * `useShellCredit` decides emptiness here (rather than letting `ShellCredit` render null inside
+ * an otherwise-empty bordered strip): the footer as a whole returns `null` only when content,
+ * links, children, the theme switcher AND the resolved credit are all absent.
+ *
+ * `themeToggle` puts the light/dark `ThemeToggle` in the bottom row beside the credit. It is the
+ * footer's own row rather than something an application adds through `content`, so every area of
+ * an application offers it in the same place and the credit keeps its position whatever the
+ * application's own footer layout does.
  */
-export const Footer: FC<FooterProps> = ({ links, translate = defaultNavTranslate, children, className, style }) => {
-  if ((links == null || links.length < 1) && children == null) {
+export const Footer: FC<FooterProps> = ({
+  links, translate = navLabelHelper.defaultNavTranslate, children, content, className, style, containerClassName,
+  themeToggle
+}) => {
+  const credit = useShellCredit()
+  const hasLinks = (links != null && links.length > 0) || children != null
+  const toggle = themeToggle == null || themeToggle === false
+    ? null
+    : themeToggle === true ? {} : themeToggle
+  if (content == null && !hasLinks && toggle == null && !credit.poweredBy && credit.line == null) {
     return null
   }
 
-  return <footer className={cn('border-t px-4 py-4', className)} style={style}>
-    <div className="flex flex-wrap items-center gap-4 text-sm">
-      {links?.map((link, idx) => {
-        const label = resolveNavLabel(
-          translate, link.label, `modules.${link.alias ?? link.href ?? ''}`, link.alias ?? link.href
-        )
+  return <footer className={cn('border-t py-6', className)} style={style}>
+    <div className={cn('flex flex-col items-center gap-3 text-center', containerClassName)}>
+      {content != null && <div data-footer-content className="w-full self-stretch text-start">{content}</div>}
+      {hasLinks && <div className="flex flex-wrap items-center justify-center gap-4 text-sm">
+        {links?.map((link, idx) => {
+          const label = navLabelHelper.resolveNavLabel(
+            translate, link.label, `modules.${link.alias ?? link.href ?? ''}`, link.alias ?? link.href
+          )
 
-        return link.href != null
-          ? <Link key={`${link.href}:${idx}`} src={link.href} open={link.open}>{label}</Link>
-          : <Link key={`${link.alias}:${idx}`} module={link.alias} open={link.open}>{label}</Link>
-      })}
-      {children}
+          return link.href != null
+            ? <Link key={`${link.href}:${idx}`} src={link.href} open={link.open}>{label}</Link>
+            : <Link key={`${link.alias}:${idx}`} module={link.alias} open={link.open}>{label}</Link>
+        })}
+        {children}
+      </div>}
+      {/*
+        * With a switcher, the credit and the switcher share the bottom row — the credit first, so
+        * it is still what the footer ends on in reading order. Without one the credit stays the
+        * container's own last child, exactly as it always was.
+        */}
+      {toggle != null
+        ? <div data-footer-bottom className="flex flex-wrap items-center justify-center gap-2">
+          <ShellCredit />
+          <ThemeToggle {...(toggle.labels != null ? { labels: toggle.labels } : {})} />
+        </div>
+        : <ShellCredit />}
     </div>
   </footer>
 }

package/src/components/footer/credit.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+import { useContext } from '@owlmeans/client'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import { resolveCredit, type ResolvedCredit } from '@owlmeans/client-auth/login'
+import type { CommonConfig } from '@owlmeans/config'
+import { cn } from '../../@/lib/utils.js'
+import { OWLMEANS_URL } from '../login/consts.js'
+import type { ShellCreditProps } from './types.js'
+
+/**
+ * The platform credit and the owner's own copyright notice, resolved from the same
+ * `security.auth.login.credit` configuration the sign-in screen reads (`resolveCredit`,
+ * `@owlmeans/client-auth/login`) — one source, so an owner who pays to drop the platform credit
+ * drops it everywhere it can appear, not only on a screen a signed-in visitor may never see
+ * again.
+ *
+ * Exported separately from {@link ShellCredit} so `Footer` can decide, WITHOUT rendering
+ * anything, whether it has nothing at all to show — an empty bordered strip is worse than no
+ * footer, and only the resolved credit knows it is empty.
+ */
+export const useShellCredit = (): ResolvedCredit => {
+  const context = useContext()
+  const cfg = (context.cfg as CommonConfig).security?.auth?.login?.credit
+  const brand = (context.cfg as CommonConfig).brand
+
+  return resolveCredit(cfg, brand, context.cfg.service)
+}
+
+/**
+ * The platform credit and the owner's own copyright notice, in every area's footer.
+ *
+ * There is deliberately no prop to hide this component: the only way to remove the platform
+ * half is the config `poweredBy: false` the entitlement gate sets, and the owner's own notice is
+ * never something a restyle should be able to delete.
+ *
+ * Order is the opposite of the sign-in screen's `LoginCredit`: a footer is read as "whose page is
+ * this, and who built it", so the owner's own copyright leads and the platform credit follows.
+ */
+export const ShellCredit: FC<ShellCreditProps> = ({ className }) => {
+  const { poweredBy, line } = useShellCredit()
+  const t = useI18nLib('auth')
+
+  if (!poweredBy && line == null) {
+    return null
+  }
+
+  return <p
+    data-shell-credit
+    className={cn('text-center text-xs text-muted-foreground', className)}
+  >
+    {line != null && <span>{line}</span>}
+    {poweredBy && line != null && <span aria-hidden="true"> · </span>}
+    {poweredBy && <a
+      data-login-powered
+      href={OWLMEANS_URL} target="_blank" rel="noopener noreferrer"
+      className="underline-offset-4 hover:text-foreground hover:underline"
+    >
+      {t('login.credit.powered', { defaultValue: 'Powered by OwlMeans' })}
+    </a>}
+  </p>
+}

package/src/components/footer/index.ts

@@ -1,3 +1,4 @@
 export type * from './types.js'
 
 export * from './component.js'
+export * from './credit.js'

package/src/components/footer/types.ts

@@ -1,9 +1,30 @@
-import type { PropsWithChildren } from 'react'
+import type { PropsWithChildren, ReactNode } from 'react'
 import type { NavTranslate, PanelNavLink } from '@owlmeans/client-panel'
+import type { ThemeToggleLabels } from '../scheme/types.js'
 import type { StyledProps } from '../types.js'
 
+/** `true` for the English labels; an object to pass the application's own. */
+export type FooterThemeToggle = boolean | { labels?: ThemeToggleLabels }
+
 export interface FooterProps extends PropsWithChildren<StyledProps> {
   links?: PanelNavLink[]
+  /**
+   * The application's own footer layout — a brand, a one-line description, link columns — as a
+   * full-width block (`w-full self-stretch`, start-aligned text) on the container's rhythm, above
+   * the link row and the credit line. `children`, by contrast, join the centred link row.
+   */
+  content?: ReactNode
+  /**
+   * Render the light/dark `ThemeToggle` in the bottom row, beside the credit line. Absent or
+   * `false`, the footer is exactly what it is without a switcher.
+   */
+  themeToggle?: FooterThemeToggle
+  /** The shell's horizontal rhythm, so the footer row lines up with the header and the content. */
+  containerClassName?: string
   /** See {@link NavTranslate} — omitted, literal labels and humanized aliases are used. */
   translate?: NavTranslate
 }
+
+export interface ShellCreditProps {
+  className?: string
+}

package/src/components/form/button/component.tsx

@@ -7,8 +7,11 @@ import { Loader2 } from 'lucide-react'
 import { I18nProps, useI18nApp, useI18nLib } from '@owlmeans/client-i18n'
 import { useContext } from '@owlmeans/client'
 import { useFormI18n, usePanelI18n } from '@owlmeans/client-panel'
-import { Button as UIButton } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { Button as UIButton } from '../../../@/components/ui/button.js'
+import { cn } from '../../../@/lib/utils.js'
+import { logger } from '@owlmeans/log'
+
+const log = logger('web-panel:form')
 
 /**
  * MUI → shadcn variant mapping:
@@ -82,7 +85,7 @@ export const SubmitButton: FC<SubmitProps> = memo((props) => {
 
   return <Button {...props} label={t(label)} i18n={_i18n}
     onClick={handleSubmit(
-      props.onSubmit ?? props.onClick ?? (() => { console.info('Empty submit') }),
-      problem => console.error('Failed to submit form with error: ', problem)
+      props.onSubmit ?? props.onClick ?? (() => { log.debug('Empty submit') }),
+      problem => log.debug('Form submit refused by validation', { fields: Object.keys(problem) })
     )} />
 })

package/src/components/form/component.tsx

@@ -12,8 +12,8 @@ import { scalingToStyles } from '../helper.js'
 import { ResilientError } from '@owlmeans/error'
 import { Status } from '../status.js'
 import type { WebFormProps } from './types.js'
-import { Card, CardContent, CardFooter } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { Card, CardContent, CardFooter } from '../../@/components/ui/card.js'
+import { cn } from '../../@/lib/utils.js'
 
 const ajv = new Ajv({ coerceTypes: true })
 formatsPlugin(ajv)

package/src/components/form/text/component.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import type { TextInputProps } from './types.js'
 import { useFormError, useFormI18n, useClientFormContext } from '@owlmeans/client-panel'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input } from '../../../@/components/ui/input.js'
+import { Label } from '../../../@/components/ui/label.js'
 
 export const TextInput: FC<TextInputProps> = ({ name, label, placeholder, hint, type, def, disableAutocomplete }) => {
   const { control } = useFormContext()

package/src/components/helper.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { BlockScaling } from '@owlmeans/client-panel'
+import { BREAKPOINTS } from './consts.local.js'
 
 /**
  * Map MUI's previous `scalingToStyles(horizontal, vertical, theme): SxProps`
@@ -44,19 +45,6 @@ export const scalingToStyles = (
   return parts.join(' ')
 }
 
-/**
- * Tailwind default breakpoints — kept stable across consumers. If a consumer
- * has customised Tailwind breakpoints in their app config, override this
- * via a wrapping hook in the app.
- */
-const BREAKPOINTS: Array<{ name: string, min: number, max: number }> = [
-  { name: 'xs', min: 0,    max: 639  },
-  { name: 'sm', min: 640,  max: 767  },
-  { name: 'md', min: 768,  max: 1023 },
-  { name: 'lg', min: 1024, max: 1279 },
-  { name: 'xl', min: 1280, max: Number.POSITIVE_INFINITY },
-]
-
 const matchBreakpoint = (width: number): string => {
   for (const bp of BREAKPOINTS) {
     if (width >= bp.min && width <= bp.max) {

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './panel-app/index.js'
 export * from './layout/index.js'
 export * from './nav/index.js'
 export * from './footer/index.js'
+export * from './login/index.js'
 
 export * from './form/index.js'
 export * from './form/text/index.js'
@@ -17,3 +18,6 @@ export * from './text.js'
 export * from './link.js'
 export * from './helper.js'
 export * from './status.js'
+export * from './toaster.js'
+export * from './socket/index.js'
+export * from './scheme/index.js'

package/src/components/link.tsx

@@ -4,7 +4,7 @@ import type { LinkProps } from './types.js'
 import { useValue } from '@owlmeans/client'
 import { useContext } from '@owlmeans/web-client'
 import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
-import { cn } from '@/lib/utils'
+import { cn } from '../@/lib/utils.js'
 
 export const Link: FC<LinkProps> = ({ src, module, name, children, center, open, className, style }) => {
   const t = usePanelI18n()
@@ -15,8 +15,8 @@ export const Link: FC<LinkProps> = ({ src, module, name, children, center, open,
       return src
     }
     if (module != null) {
-      module = typeof module === 'string' ? context.module<ClientEntrypoint<string>>(module) : module
-      const [url] = await module.call<string>()
+      module = typeof module === 'string' ? context.entrypoint<ClientEntrypoint<string>>(module) : module
+      const url = await module.url()
       return url
     }
     return null

package/src/components/login/append.ts

@@ -0,0 +1,34 @@
+import { ensureLoginService } from '@owlmeans/client-auth/login'
+import type { BasicConfig, BasicContext } from '@owlmeans/context'
+import type { ClientConfig } from '@owlmeans/client-context'
+import { LocalizedLoginScreen } from './screen.js'
+import { notifyPopupBlocked } from './notify.js'
+import type { LoginScreenSetup } from './types.js'
+
+/**
+ * Give this context the shadcn sign-in screen, with the application's own logo and copy on it.
+ *
+ * Registered on the login SERVICE rather than imported by a dispatcher, because a relying party
+ * (`web-oidc-rp`, `mui-oidc-rp`) must never depend on a UI family — that edge would make every
+ * relying party pick one, and there are two. The dispatcher asks `login().screen()` and falls back
+ * to the plain screen `@owlmeans/client-auth` ships, so an app that never calls this still gets a
+ * chooser rather than an auto-redirect.
+ *
+ * Idempotent: called by `makeContext` with defaults, and again by the app with its own logo.
+ */
+export const appendLoginScreen = <C extends BasicConfig, T extends BasicContext<C>>(
+  ctx: T, setup?: LoginScreenSetup
+): T => {
+  const service = ensureLoginService(ctx)
+  service.registerScreen(
+    setup == null || Object.keys(setup).length < 1
+      ? LocalizedLoginScreen
+      : props => LocalizedLoginScreen({ ...setup, ...props })
+  )
+  // A header "Log in"/"Log out" control has no screen to show `loginAttemptError` on, so it gets
+  // a toast instead — registered here so an app that already calls this for the screen needs no
+  // second call to get it.
+  service.registerNotifier(notifyPopupBlocked(ctx.cfg as unknown as ClientConfig))
+
+  return ctx
+}

package/src/components/login/consts.local.ts

@@ -0,0 +1,10 @@
+export const AUTH_RESOURCE = 'auth'
+
+export const POPUP_BLOCKED_FALLBACK =
+  "The sign-in window was blocked. Click the blocked pop-up icon in your browser's address bar to open it."
+
+export const VARIANT: Record<string, 'default' | 'outline' | 'link'> = {
+  primary: 'default',
+  secondary: 'outline',
+  link: 'link',
+}

package/src/components/login/consts.ts

@@ -0,0 +1,2 @@
+/** Where "Powered by OwlMeans" leads, on the sign-in screen and in every shell footer alike. */
+export const OWLMEANS_URL = 'https://owlmeans.com'